Filtering

The MultiColumnComboBox 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 MultiColumnComboBox 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.
• fields—Specifies against which fields the filtering will be performed. If no fields are specified, filtering will be performed against the provided textField.

TypeScript

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

HTML

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

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

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 user modification of the input value, the MultiColumnComboBox triggers a filterChange event with the typed string value that you can use to filter the data source.

HTML

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

TypeScript

public handleFilter(value: string): void {
    this.data = this.source.filter(
      (item) => item.name.toLowerCase().includes(value.toLowerCase())
    );
}

The following example demonstrates how to handle the filterChange event manually and filter the MultiColumnComboBox data. Note that the filtering is performed against all fields displayed in the popup table.

Change Theme

Theme

Loading ...

Server-Side Filtering

For large datasets or when data needs to be fetched from a server, you can implement server-side filtering by making API calls based on the filter value emitted in the filterChange event handler. This approach reduces the amount of data transferred and improves performance for large datasets.

The following example demonstrates how to use the filter value to create the appropriate query string, required for filtering the data on the server.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the MultiColumnComboBox