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.

Download Free Trial

Creating Blazor Filter

1. Use the TelerikFilter tag to add the component to your razor page.
2. Set the Value parameter via one-way or two-way binding.
3. Add the FilterField tag, a child tag of the FilterFields.
4. Set the Name and Type 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....

Next Steps

Configure the Filter Fields

Using the Filter Events

See Also

• Live Demo: Filter