The TelerikCheckBoxListFilter starts working very slowly with hundreds of items or more. That includes rendering and searching in it.

A possible workaround is to put a virtual Grid inside the FilterMenuTemplate. The example below is a modified version of this one - Blazor Grid checkbox list filtering with custom data. The FilterMenuButtonsTemplate is necessary to clear the selected Grid rows when the user clears the column filter.

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid TItem="@Employee"
             OnRead="@OnReadHandler"
             Pageable="true"
             FilterMode="@( NameOptions != null ? GridFilterMode.FilterMenu : GridFilterMode.None )"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
        <GridColumn Field="@nameof(Employee.Name)">
            <FilterMenuTemplate Context="context">
                <TelerikGrid Data="@NameOptions"
                             ScrollMode="@GridScrollMode.Virtual"
                             Height="240px"
                             RowHeight="36"
                             FilterMode="@GridFilterMode.FilterRow"
                             SelectionMode="@GridSelectionMode.Multiple"
                             SelectedItems="@SelectedGridItems"
                             SelectedItemsChanged="@( (IEnumerable<NameFilterOption> newSelected) =>
                                                      GridSelectedItemsChanged(newSelected, context.FilterDescriptor) )">
                    <GridColumns>
                        <GridCheckboxColumn SelectAllMode="@GridSelectAllMode.All" />
                        <GridColumn Field="@nameof(NameFilterOption.Name)"></GridColumn>
                    </GridColumns>
                </TelerikGrid>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate Context="filterContext">
                <TelerikButton OnClick="@(async _ => await filterContext.FilterAsync())"
                               ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Filter </TelerikButton>
                <TelerikButton OnClick="@(() => ClearFilterAsync(filterContext))">Clear</TelerikButton>
            </FilterMenuButtonsTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Team)" Title="Team" />
        <GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    string DDLValue { get; set; }
    List<Employee> AllGridData { get; set; }

    private IEnumerable<NameFilterOption> SelectedGridItems { get; set; } = new List<NameFilterOption>();

    private void GridSelectedItemsChanged(IEnumerable<NameFilterOption> newSelectedItems, CompositeFilterDescriptor cfd)
    {
        SelectedGridItems = newSelectedItems;
        cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
        cfd.FilterDescriptors.Clear();
        foreach (var sgi in SelectedGridItems)
        {
            cfd.FilterDescriptors.Add(new FilterDescriptor()
            {
                Member = nameof(Employee.Name),
                MemberType = typeof(string),
                Operator = FilterOperator.IsEqualTo,
                Value = sgi.Name
            });
        }
    }

    private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
    {
        SelectedGridItems = new List<NameFilterOption>();
        await filterContext.ClearFilterAsync();
    }

    #region custom-filter-data
    List<TeamNameFilterOption> TeamsList { get; set; }
    List<NameFilterOption> NameOptions { get; set; }

    //obtain filter lists data from the data source to show all options
    async Task GetTeamOptions()
    {
        if (TeamsList == null) // sample of caching since we always want all distinct options,
                               //but we don't want to make unnecessary requests
        {
            TeamsList = await GetNamesFromService();
        }
    }

    async Task<List<TeamNameFilterOption>> GetNamesFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        // this is just one example of getting distinct values from the full data source
        // in a real case you'd probably call your data service here instead
        // or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
        List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
            Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();

        return await Task.FromResult(data);
    }

    async Task GetNameOptions()
    {
        if (NameOptions == null)
        {
            NameOptions = await GetNameOptionsFromService();
        }
    }

    async Task<List<NameFilterOption>> GetNameOptionsFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
            Distinct().Select(n => new NameFilterOption { Name = n }).ToList();

        return await Task.FromResult(data);
    }
    #endregion custom-filter-data

    async Task OnReadHandler(GridReadEventArgs args)
    {
        //typical data retrieval for the grid
        var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
        args.Data = filteredData.Data as IEnumerable<Employee>;
        args.Total = filteredData.Total;
    }

    protected override async Task OnInitializedAsync()
    {
        // generate data that simulates the database for this example
        // the actual grid data is retrieve in its OnRead handler
        AllGridData = new List<Employee>();
        var rand = new Random();
        for (int i = 1; i <= 1000; i++)
        {
            AllGridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }

        // get custom filters data. In a future version you will be able to call these methods
        // from the template initialization instead of here (or in OnRead) so that they fetch data
        // only when the user actually needs filter values, instead of always - that could improve server performance
        await GetTeamOptions();
        await GetNameOptions();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }

    // in this sample we use simplified models to fetch less data from the service
    // instead of using the full Employee model that has many fields we do not need for the filters

    public class TeamNameFilterOption
    {
        public string Team { get; set; }
    }

    public class NameFilterOption
    {
        public string Name { get; set; }
    }
}

An autofit feature would be useful which sizes a column according to fit the current content exactly (with some space on the left and right ;-)

* autofit attribute for a column to automatically autofit the column

* autofit method on a grid column to issue autofit by code

Autofit for entire table (nice to have)

* autofit attribute on the grid element to automatically autofit all its columns (except those explicitely set to AutoFit="false")

* autofit method on a grid to issue autofit by code

I am editing parent and child records in the hierarchy grid.  I can edit parent and child records without issue.  The only problem I have now is this; when I click edit on a child record, then collapse the parent, the edit of the child record is lost or cancelled but there is no event I can see to use to put things back in non-edit mode.

I enable buttons and links in non-edit (view) mode and disable them when editing a record.

So,  is there an event or some way to know the user is collapsing or expanding a parent record?

Thank you,

I want to fetch grid records page per page according to the appropriate filter settings. While this is possible through the OnRead event, I want to be able to send the request to the server so that it is easier to fetch the data, like in the UI for ASP.NET Core grid. Currently you can do this only for a server-side project because you can pass the request object by reference, but for a WASM project it needs to serialize in an HTTP request.

---

ADMIN EDIT

You can find examples of doing this here: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server

---

The issue can be reproduced using the Filter From Code -> FilterMenu code snippet provided here:
https://docs.telerik.com/blazor-ui/components/grid/filtering#filter-from-code

The Custom Filter Menu in the Grid is not working as I would expect.

I am trying to do two things

1. Apply filters programmatically through the Grid State
2. Populate a custom Filter Menu with values that exist in that column

I am doing something very similar to the demo for the custom filter menu: https://demos.telerik.com/blazor-ui/grid/custom-filter-menu

I have observed that if I set a filter programatically through the grid state, those filters are applied to the grid but are not being passed through the FilterMenuTemplateContext object in the FilterMenuTemplate when I open the Filter Menu for that column.  Therefore, I cannot update my custom filter to show which values are currently being filtered on.

Is it by design that the FilterMenuTemplateContext does not contain Filters applied through the grid state or a bug?

---

ADMIN EDIT

As of Dec 2020, there is one outstanding issue - using complex filters (having a CompositeFilterDescriptor) for the FilterRow filter template gets saved in the grid state, but is not loaded as expected - the filter row uses a "regular" FilterDescriptor and cuts off additional descriptors. Thus, the context of the template does not provide all the data from the grid state and you need to extract it manually. I have attached a sample that shows one way of doing that in the StateInit handler.

The FilterMenu already provides all the data in its context and you can bind inputs in the template directly to the filter descriptors. Once the filter row can work with more complex filter descriptors as well, you would be able to create the extra descriptors (if they are not already there) and directly bind the inputs to their value, as opposed to the current approach where view-model fields are used.

---

Reproducible:

https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes 

I am using an EditorTemplate with a method called ChangeHandler(). After clicking in another row everything works fine but if I leave the cell by pressing enter the UpdateHandler gets called more than two times and comparing args.Item with the GridItem doesn't help because the calls are asynchronous.

=====

Admin Edit

With 2.22.0, the InCell editing mode was revamped to provide better user experience and this alters the way it worked. In the common case, there will no longer be double OnUpdate calls (unless explicit application logic invokes them). With 2.23.0, Tab and Enter keys that bubble from editor templates will be handled by the grid like they are handled for the built-in editors.

This means that this issue is, effectively, solved. You can see the Notes section about editor templates to see how you can also handle the OnBlur event to capture mouse clicks outside of the component so that you can save changes and remove the edited item. See the full notes here (the Event Sequence section was heavily revamped for clarity) and here on editor template behavior.

Thus, the previous ides about  Save and Cancel methods on the edit context might not be implemented, which will also be one breaking change that we could avoid:

After discussion with the development team, the proposed resolution is to provide a context that provides Save/Cancel operations. The goal is to provide easier configuration for IncellEditing and EditorTemplates and consistent behavior with mouse and keyboard interaction. However, the change will introduce a breaking change in our EditorTemplate, should be researched further and that is why this is logged as a feature request.

=====

By the following steps, the problem occurs:

1. Click on line number 1 to focus the row
2. Press the Down-Key 19 times to navigate to line 20
3. Try to navigate to line 21 via the Down-Key
4. -> No navigation possible via keyboard to the lines below
5. Try to navigate backwards via Up-Key to line 1
6. -> Navigation stops at line 15

So, it not possible to navigate through the whole grid with virtualized rows when Navigable=true





@* Scroll the grid instead of paging *@

<TelerikGrid Data=@GridData
             ScrollMode="@GridScrollMode.Virtual" Navigable="true"
             Height="480px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="Id" />
        <GridColumn Field="Name" Title="First Name" />
        <GridColumn Field="LastName" Title="Last Name" />
        <GridColumn Field="HireData" Width="200px">
            <Template>
                @((context as SampleData).HireDate.ToString("MMMM dd, yyyy"))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        GridData = await GetData();
    }

    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 1000).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Error:

Example:

private string SerializedState; private void OnStateInitHandler(GridStateEventArgs<SampleData> args) { args.GridState = JsonSerializer.Deserialize<GridState<SampleData>>(SerializedState); }

Reason:

FilterDescriptors property MemberType = null.

Note:

Method TelerikGrid.SetState() works correctly.

---

ADMIN EDIT

Attached to this post are a reproducible and a workaround - setting the state in OnAfterRenderAsync with a small delay, so the initial grid render happens, then it can re-render and take the filters into account.

---

When I switch the culture of my App from English to Swedish, the Virtual scrolling feature of the Grid breaks. 

===========

ADMIN EDIT

===========

The issue stems from invalid transform style applied to the k-virtual-position div element in Swedish culture. Due to integer to string conversion that takes culture into consideration when setting the style and/or data-translate attribute, when this number is < 0, the negative sign is longer dash for Swedish culture. This longer dash is not parsable by JS and CSS which is why the translateY transform is invalid.

As a workaround for the time being, you can try adding transform style for the k-virtual-position div, so you can override the default one and the correct dash will be applied: 

<style>
    .k-virtual-position {
        transform: translateY(-1080px);
    }
</style>

Grid virtual scrolling will freeze in the following scenario:

1. Open https://demos.telerik.com/blazor-ui/grid/virtual-scrolling
2. Scroll to the lower part of the Grid
3. Filter any column, so that the number of items becomes less than the current scroll position
4. The Grid will show "no records to display" and row placeholders, even if there are items to display