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

Filtering

The DropDownTree provides a default filter functionality, built-in filter directives, and also options for performing manual filtering and for auto-expanding its items while filtering.

Basic Configuration

The DropDownTree offers a built-in filter input element. The kendoDropDownTreeHierarchyBinding and kendoDropDownTreeFlatBinding directives complement that element with the built-in filter-handling mechanism they provide.

To show the default built-in filter input element, set the filterable property of your DropDownTree to true. The default value of the property is false. Once filterable is set to true, the DropDownTree will start emitting a filterChange event. Then you can either use one of the data-binding directives, or handle the filterChange event manually.

The DropDownTree does not support server-side data filtering.

Built-in Filtering

To take advantage of the built-in filtering mechanism, set filterable to true and use either the kendoDropDownTreeHierarchyBinding, or the kendoDropDownTreeFlatBinding data-binding directive.

Filtering with the Hierarchy Binding Directive

The following example demonstrates how to use the kendoDropDownTreeHierarchyBinding directive with filterable set to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Filtering with the Flat Binding Directive

The following example demonstrates how to use the kendoDropDownTreeFlatBinding directive with filterable set to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Filter Settings

You can fine-tune the built-in filtering mechanism by passing a filterSettings input to whichever data-binding directive you have used.

The following example demonstrates how to use both the ignoreCase and the operator settings.

Example
View Source
Edit In Stackblitz  
Change Theme:

Auto-Expanding Items while Filtering

You can control the expanded state of the DropDownTree items while filtering.

To enable the auto-expanding functionality, perform the following configuration steps:

  1. Use either the kendoDropDownTreeHierarchyBinding or the kendoDropDownTreeFlatBinding directive.
  2. Use the kendoDropDownTreeExpandable directive.
  3. Pass an expandOnFilter input to the component. The kendoDropDownTreeExpandable directive receives the input and handles the expanded state.

The examples that are included in this section demonstrate each of the available settings for the expandOnFilter input. To use the default value of each setting, you can also pass true to this input.

Setting the Maximum Number of Expanding Items

The maxAutoExpandResults setting defines the maximum number of items that will be auto-expanded when users perform filtering. If the number of the filter results exceeds this value, the expanded state will be reverted according to the expandedOnClear setting.

Example
View Source
Edit In Stackblitz  
Change Theme:

Expanding the Matching Items

The expandMatches setting expands the matching items as well as displays their children. The configuration option is only applicable in lenient mode because the children of the matched items are not rendered in strict mode.

Example
View Source
Edit In Stackblitz  
Change Theme:

Persisting the Expanded Item State

The expandedOnClear setting defines which items will remain expanded when the filter is cleared or when the filter results exceed the maxAutoExpandResults.

Example
View Source
Edit In Stackblitz  
Change Theme:

Manual Filtering

To manually filter the DropDownTree component in combination with the fetchChildren and hasChildren functions, set its filterable property to true. As a result, the DropDownTree will start emitting a filterChange event which represents a string with the filter term.

The following example demonstrates how to implement the manual search function which filters the data that is passed to the DropDownTree.

Example
View Source
Edit In Stackblitz  
Change Theme: