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
filterable
totrue
as described above and filtering will work out of the box. - Pass a
filter
prop to thekendoTreeViewHierarchyBinding
or thekendoTreeViewFlatDataBinding
directive. 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:
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 usekendoTreeViewHierarchyBinding
orkendoTreeViewFlatDataBinding
will just set an initial value to the built-in input element, but no filtering will be performed automatically.
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.