Filtering

To enable the filtering functionality, set the filterable property to true.

Basic Configuration

On every character input, the component triggers a filterChange event. The event argument contains the typed string value that you can use to filter the source.

Example
View Source
Edit In Stackblitz  
Change Theme:

To filter the data after a delay, use a similar implementation. You can toggle the loading property and provide the user with a visual indication of the filtering process.

Example
View Source
Edit In Stackblitz  
Change Theme:

Minimum Filter Length

The following example demonstrates how to update the data and open the suggestion box of the MultiSelect, only after typing a minimum number of characters.

Example
View Source
Edit In Stackblitz  
Change Theme:

Built-in Directive

When the entire set of data is available on the client, you can use the built-in kendoDropDownFilter directive to filter the data on user input. To configure the kendoDropDownFilter directive, provide a DropDownFilterSettings object to it. DropDownFilterSettings enables you to set the case sensitivity of the performed search through the caseSensitive property and the search logic operator which provides the startsWith and contains options.

The provision of theDropDownFilterSettings configuration object is optional. By default, the kendoDropDownFilter directive performs a case-insensitive search with the startsWith operator.

Example
View Source
Edit In Stackblitz  
Change Theme: