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

Filtering

The TreeView provides a mechanism for rendering a filter input as well as built-in filter handling through the kendoTreeViewHierarchyBinding and kendoTreeViewFlatDataBinding directives.

The TreeView does not support server-side data filtering.

Built-in Filter Input Element

To show the default built-in filter input element, set the filterable prop of your TreeView to true. It is set to false by default. Once filterable is set to true, the TreeView will start emitting a filterChange event. You could then either use one of the data-binding directives, or handle the filterChange event manually.

Built-in Filtering

You could use the kendoTreeViewHierarchyBinding or the kendoTreeViewFlatDataBinding directive to take advantage of their built-in filtering. This could be done in one of two ways:

Filtering Using the Hierarchy Binding Directive

Using the kendoTreeViewHierarchyBinding directive with filterable set to true:

Example
View Source
Edit In Stackblitz  
Change Theme:

Using the kendoTreeViewHierarchyBinding filtering by passing it a filter prop from an external source:

Example
View Source
Edit In Stackblitz  
Change Theme:

Filtering Using the Flat Binding Directive

Using the kendoTreeViewFlatDataBinding directive with filterable set to true:

Example
View Source
Edit In Stackblitz  
Change Theme:

Using the kendoTreeViewFlatDataBinding filtering by passing it a filter prop from an external source:

Example
View Source
Edit In Stackblitz  
Change Theme:

Filter Settings

The built-in filtering can be fine-tuned by passing a filterSettings input to whichever data-binding directive you have used.

The following example uses both the ignoreCase and the operator settings.

Example
View Source
Edit In Stackblitz  
Change Theme:

Setting an Initial Filter

Passing a filter prop to a TreeView which both uses one of our data-binding directives, and has its filterable prop set to true, will result in an initial filtration being applied as soon as the component loads.

Passing a filter prop to a TreeView which does not use kendoTreeViewHierarchyBinding or kendoTreeViewFlatDataBinding will just set an initial value to the built-in input element, but no filtering will be performed automatically.

Example
View Source
Edit In Stackblitz  
Change Theme:

Manual Filtering

To manually filter the TreeView component in combination with children and hasChildren functions, first set its filterable prop to true. Once that's done, the TreeView will start emitting a filterChange event, which is a string containing the filter term.

The following example demonstrates a manual search function which filters the data passed to the TreeView.

Example
View Source
Edit In Stackblitz  
Change Theme: