Filtering

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

The DropDownList Component is part of KendoReact, a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

Basic Configuration

When the filtering functionality is enabled, the component renders a filter input in the drop-down list. On every character input, the component triggers a onFilterChange 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 DropDownList only after typing a minimum number of characters.

Example
View Source
Edit In Stackblitz  
Change Theme:

Filtering with Remote Data and Virtualization

The following example demonstrates how to configure the DropDownList to use remote data along with data caching, virtual scrolling, and filtering.

Example
View Source
Edit In Stackblitz  
Change Theme: