MultiSelect - Custom Filtering

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.