New to Telerik UI for Blazor? Download free 30-day trial

How to pre-set a checkbox filter with a filter descriptor?

Environment

Product Grid for Blazor

Description

How can I pre-set a checkbox filter using a filter descriptor? How to set checkbox filter on Grid first load? How can I statically specify the checkbox list content? How to set checkbox filter on the first initialization of the Grid?

Solution

To pre-select checkbox filter in the Grid using a filter descriptor:

  1. Use the OnStateInit event of the Grid.
  2. Create a new GridState instance.
  3. Add a new CompositeFilterDescriptor instance to the FilterDescriptors collection in the state.
  4. Apply the new state to the current Grid state.

The result from the code snippet below.

Blazor Grid Pre-select Checkbox Filter

@*Grid with pre-set checkbox filter on initial load.*@

<TelerikGrid Data="@MyData" FilterMode="@GridFilterMode.FilterMenu" FilterMenuType="@FilterMenuType.CheckBoxList"
             OnStateInit="@((GridStateEventArgs<SampleData> args) => OnStateInitHandler(args))">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
    </GridColumns>
</TelerikGrid>

@code {
    async Task OnStateInitHandler(GridStateEventArgs<SampleData> args)
    {
        var state = new GridState<SampleData>
        {
            FilterDescriptors = new List<Telerik.DataSource.IFilterDescriptor>()
            {
                new Telerik.DataSource.CompositeFilterDescriptor()
                {
                    FilterDescriptors = new Telerik.DataSource.FilterDescriptorCollection()
                    {
                        new Telerik.DataSource.FilterDescriptor() { Member = "Id", Value = 1, MemberType = typeof(int) },
                        new Telerik.DataSource.FilterDescriptor() { Member = "Id", Value = 2, MemberType = typeof(int) },
                        new Telerik.DataSource.FilterDescriptor() { Member = "Id", Value = 3, MemberType = typeof(int) },
                    },
                    LogicalOperator = Telerik.DataSource.FilterCompositionLogicalOperator.Or
                }
            },
        };

        args.GridState = state;
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}
In this article