The TreeView does not support server-side data filtering.
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.
- Just set
trueas described above and filtering will work out of the box.
- Pass a
filterprop to the
kendoTreeViewFlatDataBindingdirective. This works even when the built-in input is not shown (
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
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.
filterprop to a TreeView which does not use
kendoTreeViewFlatDataBindingwill just set an initial value to the built-in input element, but no filtering will be performed automatically.
The TreeView lets you control the expanded state of its nodes while filtering. To enable it, please use the following configuration:
- Use either
- Use the
- Pass an
expandOnFilterinput to the component (received by the
ExpandDirectiveto 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.
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.
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.
Sets which nodes should be left expanded when the filter is cleared, or when the filter results exceed the maxAutoExpandResults.
To manually filter the TreeView component in combination with
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.