New to Kendo UI for Angular? Start a free 30-day trial

Filtering

The MultiColumnComboBox provides a built-in filtering mechanism, a server-side filtering functionality, and a filtering directive.

Basic Configuration

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

On every user modification of the input value, the MultiColumnComboBox triggers a filterChange event. The event argument contains the typed string value that you can use to filter the source.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Built-in Directive

When the entire set of data is available on the client, you can also use the built-in kendoDropDownFilter directive to filter the data on user input. To configure the kendoDropDownFilter directive, provide a DropDownFilterSettings object to it.

The settings object allows you to configure the following options:

  • operatorSpecifies the operator which is used to perform the filtering. Currently, the filtering directive supports the startsWith and contains operators.
  • caseSensitiveSpecifies whether case sensitivity will be acknowledged. By default, the directive will perform case-insensitive filtering.
  • fieldsSpecifies against which fields the filtering will be performed. If no fields are specified, filtering will be performed against the provided textField.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Server-Side Filtering

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

Example
View Source
Edit In Stackblitz  
Change Theme: