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 headersTelerik.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 CompositeFilterDescriptors. The below information is important if you want to get or change the Grid filters programmatically.
Each CompositeFilterDescriptor contains a collection of FilterDescriptors. All descriptors in the collection are applied with an AND or an OR LogicalOperator.
Filter Row - each
CompositeFilterDescriptortargets a specific field. By default, one filter can be applied to a field using the Filter Row operator. The filter value is stored in the firstFilterDescriptorinstance of theCompositeFilterDescriptorfor that field.Filter Menu - each
CompositeFilterDescriptortargets a specific field. Filter values from the separate filter opearators in the menu are stored in differentFilterDescriptorinstances of the dedicatedCompositeFilterDescriptorfor that field.SearchBox - one
CompositeFilterDescriptoris created in the state when the user types in the Searchbox. By default, it targets allstringfields. A dedicatedFilterDescriptorinstance is added to thisCompositeFilterDescriptorfor eachstringfield. EachFilterDescriptorinstance contains the filter value typed in the Searchbox.
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
OnReadevent. 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 Filter Editors
You can customize the filter editors declaratively for some data types. It is possible to change the editor component or the editor format.
| GridColumn Parameter | Type | Works for | Description |
|---|---|---|---|
FilterEditorType |
GridFilterEditorType enum |
DateTime columns |
The component, which the Grid will render for filtering (DatePicker or DateTimePicker). |
FilterEditorFormat |
string |
DateTime and numeric columns |
The Format of the filtering component. Do not use a placeholder (e.g. set "D", not "{0:D}"). |
@* Using FilterEditorType and FilterEditorFormat parameters *@
<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"
FilterEditorFormat="yyyy-MM-dd HH:mm"
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.
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.