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:
- Just set
filterabletotrueas described above and filtering will work out of the box. - Pass a
filterprop to thekendoTreeViewHierarchyBindingor thekendoTreeViewFlatDataBindingdirective. This works even when the built-in input is not shown (filterable=false).
Filtering Using the Hierarchy Binding Directive
Using the kendoTreeViewHierarchyBinding directive with filterable set to true:
Using the kendoTreeViewHierarchyBinding filtering by passing it a filter prop from an external source:
Filtering Using the Flat Binding Directive
Using the kendoTreeViewFlatDataBinding directive with filterable set to true:
Using the kendoTreeViewFlatDataBinding filtering by passing it a filter prop from an external source:
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.
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
filterprop to a TreeView which does not usekendoTreeViewHierarchyBindingorkendoTreeViewFlatDataBindingwill just set an initial value to the built-in input element, but no filtering will be performed automatically.
Auto-Expanding Nodes While Filtering
The TreeView lets you control the expanded state of its nodes while filtering. To enable it, please use the following configuration:
- Use either
kendoTreeViewHierarchyBindingorkendoTreeViewFlatDataBinding. - Use the
ExpandDirective. - Pass an
expandOnFilterinput to the component (received by theExpandDirectiveto handle the expanded state).
The following examples demonstrate each of the available settings for expandOnFilter. You can also pass true to this input, which will result in the default value for each setting.
maxAutoExpandResults
This is the max amount of nodes to be auto-expanded on filter. If the number of filter results exceeds this value, the expanded state will be reverted according to the expandedOnClear setting.
expandMatches
Expand the matching nodes in order to display their children too. Only applicable in lenient mode, as in strict mode, children of matched nodes are not shown.
expandedOnClear
Sets which nodes should be left expanded when the filter is cleared, or when the filter results exceed the maxAutoExpandResults.
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.