Blazor Grid Filtering Overview

The Grid component offers built-in support for filtering.

Basics

To enable filtering, set the grid's FilterMode property to one of the following values:

• Telerik.Blazor.GridFilterMode.FilterRow - a row of filter options is rendered below the column headers

• Telerik.Blazor.GridFilterMode.FilterMenu - the column headers render a button that shows a popup with filtering options

The behavior of the filter input and the available filter operators will depend on the column data type. For example, a boolean field will only have the options "is true" and "is false" and will not have operators like "contains" or "greater than".

You can filter more than one column at a time, and all filter rules will be applied together with an AND logic.

You can prevent the user from filtering a certain field by setting Filterable="false" on its column.

More Filtering Options

In addition to the two main filtering modes, the grid offers two more features that can enhance the user experience when looking for data:

• A searchbox in the toolbar can amend the filters and let the user look up many fields at once

• The filter menu can show a list of checkboxes with the distinct values from the data to make filtering resemble Excel.

Filter Descriptors

The Grid filter state is stored in two types of filter descriptors. The below information is important if you want to get or change the Grid filters programmatically.

• Filter rows use FilterDescriptors. Each FilterDescriptor contains one filtering criterion for one field (Member).
• The SearchBox and filter menus use CompositeFilterDescriptors. Each CompositeFilterDescriptor contains a collection of FilterDescriptors which can target the same field or different fields. All descriptors in the collection are applied with an AND or an OR LogicalOperator.

Custom Filtering

There are two approaches to customize the grid filtering behavior, and you can use them together:

• Perform the data operations yourself (e.g., by outsourcing them to some API backend or other service) - to do that, use the OnRead event. This will let you fetch only the current page of data for the grid, instead of pulling the entire data set and storing it in-memory in the view-model.

• Customize the appearance and behavior of the filters - for that, use the Filter Templates the grid provides.

Customize The Filtering Fields

You can customize the filter editors rendered in the Grid by providing the FilterEditorType attribute, exposed on the <GridColumn>, or by utilizing the points above. The FilterEditorType attribute accepts a member of the GridFilterEditorType enum:

Field data type	GridFilterEditorType enum members
DateTime	GridFilterEditorType.DatePicker GridFilterEditorType.DateTimePicker

@* The usage of the FilterEditorType parameter *@

<TelerikGrid Data=@GridData 
             FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
             Pageable="true" 
             Height="400px">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.AgeInYears) Title="Age" />
        <GridColumn Field=@nameof(Employee.HireDate) 
                    FilterEditorType="@GridFilterEditorType.DateTimePicker"
                    Title="Hire Date" />
        <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

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

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                AgeInYears = rand.Next(10, 80),
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)),
                IsOnLeave = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int? EmployeeId { get; set; }
        public string Name { get; set; }
        public int? AgeInYears { get; set; }
        public DateTime HireDate { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

Advanced Examples

The following articles and sample projects can be helpful when implementing filtering:

• Capture Filtered event - the grid state lets you know when it changes so you can capture different aspects of the change

• Server Filtering - this article explains how to implement manual data source operations so you can offload the work to the server. It provides the overview of how to setup the grid for that, and examples - several with local data and links a repository with examples using REST API endpoints.

• Filter and Edit Enum fields

• Leave only one option in the Filter Menu - this is a CSS approach, or you can implement a custom filter template.

Notes

• The grid uses Activator.CreateInstance<TItem>(); to get the type of the item it is bound to in order to generate proper filters and filter operators for them. Thus, the Model should have a Parameterless constructor defined.

See Also

• Live Demo: Grid Filter Row
• Live Demo: Grid Filter Menu