The MultiSelectTree provides a default filter functionality, built-in filter directives, and also options for performing manual filtering and for auto-expanding its items while filtering.
The MultiSelectTree offers a built-in filter input element. The
kendoMultiSelectTreeFlatBinding directives complement it with a built-in filter handling mechanism.
To show the default built-in filter input element, set the
filterable property of your MultiSelectTree to
true. The default value of the property is
filterable is set to
true, the MultiSelectTree will start emitting a
filterChange event. Then you can either use one of the data-binding directives, or handle the
filterChange event manually.
The MultiSelectTree does not support server-side data filtering.
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 uses both the
ignoreCase and the
You can control the expanded state of the MultiSelectTree items while filtering.
To enable the auto-expanding functionality, perform the following configuration steps:
- Use either
- Pass an
expandOnFilterinput to the component. The
kendoMultiSelectTreeExpandabledirective 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.
maxAutoExpandResults setting defines the maximum number of items that will be auto-expanded when filtering. If the number of filter results exceeds this value, the expanded state will be reverted according to the
expandMatches setting expands the matching items as well as displays their children. The configuration option is only applicable in the lenient mode because the children of the matched items are not rendered in the strict mode.
expandedOnClear setting defines which items will remain expanded when the filter is cleared or when the filter results exceed the
To manually filter the DropDownTree component in combination with the
hasChildren functions, set its
filterable property to
true. As a result, the MultiSelectTree 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 MultiSelectTree.