Filtering

The DropDownList component provides powerful filtering capabilities that help users quickly find relevant items from large datasets. When filtering is enabled, the component renders a filter input in the dropdown list, allowing users to type and automatically filter the available options, making data selection more efficient and user-friendly.

The easiest approach to enable filtering in the DropDownList is to use the built-in filtering directive, which requires minimal setup and handles the filtering logic automatically. For more advanced scenarios, you can implement custom filtering with manual event handling.

The following example demonstrates the automatic filtering approach in action.

Change Theme

Theme

Loading ...

Automatic Filtering

For the automatic filtering implementation, use the built-in kendoDropDownFilter directive when your entire dataset is available on the client. This approach requires no custom event handling or filtering logic.

To configure the kendoDropDownFilter directive, provide a DropDownFilterSettings object to it. The settings allow you to control the following options:

• operator—Specifies the operator which is used to perform the filtering. Currently, the filtering directive supports the startsWith and contains operators.
• caseSensitive—Specifies whether case sensitivity will be acknowledged. By default, the directive will perform case-insensitive filtering.

TypeScript

public filterSettings: DropDownFilterSettings = {
    caseSensitive: true,
    operator: "contains",
};

HTML

<kendo-dropdownlist ... [kendoDropDownFilter]="filterSettings">
</kendo-dropdownlist>

Providing a DropDownFilterSettings configuration object is optional. By default, the kendoDropDownFilter directive performs a case-insensitive search with the startsWith operator.

The kendoDropDownFilter directive cannot be used with grouped data.

Manual Filtering

For more complex filtering requirements or when working with server-side data, you can implement custom filtering logic using the component's events and properties.

To implement manual filtering functionality, set the filterable property to true. When filtering is enabled, the component renders a filter input in the dropdown list. On every character input, the component triggers a filterChange event with the typed string value that you can use to filter the data source.

HTML

<kendo-dropdownlist
    [data]="data"
    [filterable]="true"
    (filterChange)="handleFilter($event)"
>
</kendo-dropdownlist>

TypeScript

public handleFilter(value: string): void {
    this.data = this.source.filter(
      (s) => s.toLowerCase().indexOf(value.toLowerCase()) !== -1
    );
}

Enabling the filtering functionality prevents the options list popup from closing when the DropDownList wrapper leaves the viewport, as it includes a focused input element for the user to provide their filter query.

The following example shows how to implement custom filtering logic by handling the filterChange event of the DropDownList.

Change Theme

Theme

Loading ...

Delayed Filtering

To improve performance and provide better user experience, you can implement delayed filtering that waits before executing the filter operation, instead of filtering on every keystroke. This approach is useful for both client-side optimization and when implementing server-side filtering.

To filter the DropDownList data after a delay, subscribe to the filterChange event and use suitable RxJS operators to wait for the user to pause typing before executing the filter operation. You can also toggle the loading property to provide visual feedback during the process.

The following example demonstrates how to add a delay to the filtering process using RxJS operators and shows a loading indicator during the operation.

Change Theme

Theme

Loading ...

Minimum Filter Length

You can configure the DropDownList to start filtering only after a minimum number of characters have been typed, which is particularly useful for large datasets or server-side filtering scenarios.

To achieve this behavior, check the length of the input value in the filterChange event handler and only perform filtering when it meets your minimum requirement. When the input is below the threshold, you can close the DropDownList popup using the toggle() method.

The following example demonstrates how to update the data and open the popup of the DropDownList only after typing a minimum number of characters.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the DropDownList