Filtering

The MultiSelect component provides powerful filtering capabilities that help users quickly find relevant items from large datasets. As a user types, the component can automatically filter the available options, making data selection more efficient and user-friendly.

The easiest approach to enable filtering in the MultiSelect 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-multiselect ... [kendoDropDownFilter]="filterSettings">
</kendo-multiselect>

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. 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-multiselect
    [data]="data"
    [filterable]="true"
    (filterChange)="handleFilter($event)"
>
</kendo-multiselect>

TypeScript

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

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

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 MultiSelect 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 MultiSelect 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 MultiSelect popup using the toggle() method.

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

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the MultiSelect