Blazor Filter Overview
The Blazor Filter component serves as a complementary addition to data-bound components that do not have built-in filtering.
The component gives a unified way to build filter descriptors using its fields. You can also define different operators and use these filter descriptors to filter data.
The Filter component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Filter
- Use the
TelerikFilter
tag to add the component to your razor page. - Set the
Value
parameter via one-way or two-way binding. - Add the
FilterField
tag, a child tag of theFilterFields
. - Set the
Name
andType
properties.
A basic configuration of the Telerik Filter.
@* This code snippet showcases an example of a basic Filter configuration. *@
@using Telerik.DataSource
<TelerikFilter @ref="FilterRef" @bind-Value="@Value">
<FilterFields>
<FilterField Name="@(nameof(Person.EmployeeId))" Type="@(typeof(int))" Label="Id"></FilterField>
<FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name"></FilterField>
<FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age"></FilterField>
</FilterFields>
</TelerikFilter>
@code {
TelerikFilter FilterRef { get; set; }
public CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();
public class Person
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public int AgeInYears { get; set; }
}
}
Fields
The fields are responsible for setting up the Filter information. Read more about the supported Blazor Filter fields...
Parameters
The Blazor Filter provides parameters that allow you to configure the component:
Parameter | Type | Description |
---|---|---|
Class |
string |
The class that will be rendered on the outermost element. |
Value |
CompositeFilterDescriptor |
Sets the value of the filter component. |
Events
The Blazor Filter generates events that you can handle and further customize its behavior. Read more about the Blazor Filter events....