New to Telerik UI for Blazor? Download Free 30-day trial

MultiSelect - Custom Filtering

In this example, the Telerik DataSource is used to filter existing data to skip the first 10 items.
  • Custom-filtering.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

The Telerik UI for Blazor MultiSelect component allows the user to select multiple values from a list of suggestions. In some scenarios, this list can be long and you might want to reduce it.

On top of the built-in filtering that the Blazor MultiSelect supports, you can also programmatically filter the available items to display a custom list to the user. Such functionality can be useful if you only want to show a specific set of items that the user can select from.

To create custom programmatic filter you can handle the OnRead event of the Blazor MultiSelect. It fires when the component initializes, when the user filters or the user scrolls with virtualization enabled. The Request field of the MultiSelectReadEventArgs contains Filters collection where you can add the desired filter. Use Telerik.DataSource to add the custom FilterDescriptor.

The current demo showcases a Blazor MultiSelect with custom filtering. The available data is a long list of countries. The component, however, will display only the countries with ID higher than 10.

Focus the input of the Blazor MultiSelect to open its popup. The first country on the list is Estonia and its ID value is 11. This is achieved by programmatically adding a custom filter in the OnRead event handler. The custom FilterDescriptor targets the Id field of the Country model. The FilterDescriptor uses FilterOperator.IsGreaterThan and a value of 10.

This Blazor MultiSelect Custom Filtering example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.