background

UI for Blazor

Blazor Filter

  • The Blazor Filter component  allows users to quickly build filter expressions using a point-and-click approach.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Telerik UI for Blazor Filter - Header
  • Templates

    The Telerik UI for Blazor Filter supports Blazor templates, allowing you to input filter values for filter expressions in a custom UI. The component’s category field uses a custom value editor through a FilterField ValueTemplate. Users select a category name as a string, while the data is getting filtered by the respective category ID.

    See Telerik UI for Blazor Filter templates demo

  • Overview

    The Blazor Filter component (also known as a query builder) allows users to build filter expressions using a point-and-click approach. The filtering rules can contain multiple logical operators and expressions and can be applied to any data-bound component such as the Grid, ListView and TreeList.

    See Blazor Filter UI component example.

    Telerik UI for Blazor Filter Component
  • Filter Operators

    You can configure the Blazor Filter component by adding custom operators per field using the Operators parameter.

    See Blazor Filter Operators demo.

  • Expressions and Group of Expressions

    Using the Telerik UI for Blazor Filter, users can easily add and remove new expressions or groups of expressions with the provided built-in buttons.

    Telerik UI for Blazor Filter Component Expressions
  • Localization

    The Filter UI component comes with built-in localization of the logical AND & OR operators, the Close button of each group/filter and the Add Expression and Add Group texts. The translated text is available for customization through the Resource file.

    See how translated texts work in Blazor Filter.

  • Customization of the Filter Default Operator

    The DefaultOperator parameter of the Blazor Filter component allows you to customize the default filter operator on a per-field basis (the filter that is preselected each time you add a new field). If unassigned, the default operator will be set based on the data type. 

    See an example of custom filter operators in the Blazor Filter component.

  • Theming

    The Telerik Blazor Filter component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap and Fluent. You can easily customize any of out-of-the-box themes with a few lines of CSS, or create a new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.

    Telerik UI for Blazor Filter Component Built-in Themes
  • Right-to-Left (RTL) Support

    The Telerik UI for Blazor Filter component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

    Learn more in our Blazor Right-to-Left Support documentation

    Blazor RTL Support

All Blazor Components

Next Steps