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:
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 thestartsWithandcontainsoperators.caseSensitive—Specifies whether case sensitivity will be acknowledged. By default, the directive will perform case-insensitive filtering.
The following snippet shows the minimal automatic filtering configuration:
<kendo-multiselect
[data]="data"
[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
kendoDropDownFilterdirective 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 popup 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.
The following snippet shows the minimal client-side filtering setup:
<kendo-multiselect
[data]="data"
[filterable]="true"
textField="text"
valueField="value"
(filterChange)="onFilterChange($event)"
>
</kendo-multiselect>When the user clears the filter input, the MultiSelect emits filterChange with an empty string. Use that state to restore the full client-side dataset or request the unfiltered remote dataset again.
The following example shows how to implement custom filtering logic by handling the filterChange event of the MultiSelect.
Server-Side Filtering
For large datasets where all items cannot be loaded upfront, implement server-side filtering by making HTTP requests from inside the filterChange event handler. Bind the result Observable through the [data] property and use the loading input to show progress while the request is in flight.
You can also define a no-data template so the popup clearly communicates whether the component is still searching or no matching items were found.
The following example demonstrates how to wire the MultiSelect to a server-side data source using the filterChange event and the Angular async pipe.
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.
This pattern is most useful when filtering triggers expensive client-side processing or remote requests that do not need to run for every keystroke.
The following example demonstrates how to add a delay to the filtering process using RxJS operators and shows a loading indicator during the operation.
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.
This approach works well together with server-side filtering because it avoids sending requests for very short and low-value queries.
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.