When the Virtualization feature is enabled, triggering Incell edit causes the Grid to scroll. When we scroll the edit is canceled. This happens when the row is partially visible.
https://www.screencast.com/t/zCJ9z9P83c

A more specific case is when you try to edit the last row. In case the editor height is bigger than the row height the Grid tries to scroll but there is no more data. The editor is closed and the item cannot be edited.
https://www.screencast.com/t/331cT4xxt

Reproduction: https://blazorrepl.telerik.com/QxEcECvx22pq4BBG59

I want to filter a Grid by DateTimeOffset? field

===ADMIN EDIT===

There are two possible options:

1. Use a DTO in which you have a DateTime field converted as desired by your app from the DateTimeOffset. Filtering, sorting, editing, and grouping on DateTime values are supported out-of-the-box.

REPL example that demonstrates this approach. 

2. Use the Grid Filter Template. As a filter editor, you can use the DateTimePicker component, which supports the DateTimeOffset type. 

REPL example that demonstrates this approach. 

@GridEditMode.Incell mode does not update automatically on row change when an editortemplate is used, as below

            <GridColumn Field=@nameof(ProjectRankingInfo.Ranking.Option2) Title="@Option2Title" Width="120px" Filterable="false">
                <EditorTemplate>
                    @{
                        currentItem = context as ProjectRankingInfo.Ranking;
                        <TelerikNumericTextBox Max="10" Min="0" Step="1" @bind-Value=@currentItem.Option2 />
                    }
                </EditorTemplate>
            </GridColumn>

one must click the update button for the update to occur,

Incell works fine and updates on row change for simple grid columns

ADMIN EDIT: SOLUTION: Read the details in the following article: https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes

ADMIN EDIT: this thread is rather long and I am adding the workaround offered by René here:

Hi,

This relates to my forum post here: https://www.telerik.com/forums/grid-selection-performance

I've noticed that the grid becomes very slow to select a row and to page when there is more than a little data being displayed. In the test project attached it can take 9 seconds to just select a row on the grid which is unworkable. Although we can reduce the amount of data and use paging in the real application we are developing it is still far too slow for Production use.

The test application has 2 pages, one using the Telerik grid and one using a simple component that draws an HTML table and handles selection. My aim was to prove that the problem is not down to Blazor re-rendering when a row is selected. The simple component it is around 0.3 seconds to select a row vs 9 seconds for the Telerik grid.

Obviously I appreciate that the Telerik grid is doing a lot more than the component, but it is not just Blazor that is causing this issue, it must be related to the work the grid has to do when a row is selected.

The attached project has 2 pages, one using the Telerik Grid one using my simple component. Click the load button to generate 300 rows of test data and then try clicking on a row. You can see the problem by running a performance trace in either Firefox or Chrome. The browser can even become unresponsive just clicking on a row, which you will appreciate is impossible to live with. If that doesn't happen you can try increasing the amount of data generated.

Thanks for your time!
Kind Regards,
Nick.

If I set grouping in OnStateInit, the GroupFooterTemplate does not have data for the aggregates I have set. If I group manually by dragging a column header, the data is there.

------

ADMIN EDIT: This stems from a framework behavior. The <GridAggregates> tag is a child component of the grid and as such, initializes after the grid. Since there is no event when all such child components are initialized the parent component cannot wait for them before starting to render and thus, it initializes before it can know what aggregates are defined.

I would like to be able to customize the default format for dates and numbers that the grid has to, for example, use the current UI culture of my app.

*** Thread created by admin on customer behalf ***

---

ADMIN EDIT

Here is a workaround - using a bit of JS to clear the checked state of the checkbox element when you clear the SelectedItems collection:

At the end of this post you can find attached a sample project that showcases a more complex scenario where you may want to keep some rows selected but cancel the selection of others (in that sample, only one row with a given ItemType can be selected). It shows how you can get the index in the rendering of a particular row to use for a slightly modified version of the JS function.

@inject IJSRuntime _js

@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">
    function uncheckGrid() {
        var checkboxes = document.querySelectorAll(".no-select .k-grid-checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
    }
</script>

<style>
    .no-select {
        cursor: not-allowed;
    }

    .no-select .k-checkbox {
        pointer-events: none;
    }
</style>

<TelerikGrid Data=@GridData
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             SelectedItems="@SelectedEmployees"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" OnCellRender="@OnGridCellRender" />
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Active)" />
    </GridColumns>
</TelerikGrid>

@if (SelectedEmployees != null)
{
    <ul>
        @foreach (Employee employee in SelectedEmployees)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code {
    private List<Employee> GridData { get; set; } = new List<Employee>();

    private IEnumerable<Employee> SelectedEmployees { get; set; } = new List<Employee>();

    private void OnGridCellRender(GridCellRenderEventArgs args)
    {
        var product = (Employee)args.Item;
        if (!product.Active)
        {
            args.Class = "no-select";
        }
    }

    protected void OnSelect(IEnumerable<Employee> newSelected)
    {
        var validItemsToSelect = newSelected.Where(x => x.Active);
        SelectedEmployees = validItemsToSelect;
        if (validItemsToSelect.Count() < newSelected.Count())
        {
            _js.InvokeVoidAsync("uncheckGrid");
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = $"Employee {i}",
                Team = $"Team {i % 3 + 1}",
                Active = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public bool Active { get; set; }
    }
}

---

ADMIN EDIT

A sample reproducible is attached.

The issue stems from the inability of the System.Text.Json serializer to work with fields of type "Type" and the filter descriptors have such a field to denote the type of the column. Whether it will be possible for the grid to work around needs to be researched in more detail, because the limitation comes from the framework.

Might be the same problem as the following thread that also offers a few workarounds one can consider: https://feedback.telerik.com/blazor/1505237-set-deserialized-grid-state-in-onstateinit-handler-cause-error-on-open-filter-menu-of-column-on-ui

---

Based on some program logic and conditions I want to programmatic scroll to a chosen row so the user can see a specific row. For example:

- Scroll to a selected row

- Scroll to a record, based on its Id

-Scroll to the top of the Grid when the user adds a new item

- Scroll to an expanded item in hierarchical Grid

=====ADMIN EDIT======

We have a knowledge-based article that showcases how to scroll the Grid to the selected row. This article links to a sample GitHub application where you see code samples. If you need to scroll to another row, you can use a similar approach.

When attempting to utilize the FilterMenuButtonsTemplate component, after selecting any of the defined action buttons (i.e., Clear, Filter, etc.), the selection will cause the page to refresh.

Steps:

1. Proceed to the Telerik Blazor documentation page for Filter Menu Buttons Template within the Grid component.
2. View the example for Using custom filter menu buttons.
3. Ensure that this is the first time loading the component as the error will only occur on the example page when first initialized.
4. Select the filter button within the “Price” column header.
5. Press the “Clear” button.