Filtering
The MultiSelectTree component provides filtering capabilities that work with both hierarchical and flat data structures. When filtering is enabled, users can type in a filter input within the popup list, which allows them to quickly find specific nodes from tree datasets. The component also allows controlling how the nodes expand during filtering operations.
The easiest approach to enable filtering in the MultiSelectTree is to use built-in directives, which require minimal setup and handle the filtering logic automatically. For more advanced scenarios, you can implement custom filtering with manual event handling.
The MultiSelectTree does not support server-side data filtering.
The following example demonstrates how to implement automatic filtering in the MultiSelectTree when using a hierarchical dataset.
Automatic Filtering
For the automatic filtering implementation, use the built-in data-binding directives when your entire dataset is available on the client. This approach provides the simplest setup and requires no custom event handling or filtering logic.
To enable automatic filtering, set the filterable property to true and choose the appropriate data-binding approach based on your data structure:
- Hierarchy binding—Use
kendoMultiSelectTreeHierarchyBindingfor hierarchical data with parent-child relationships. - Flat binding—Use
kendoMultiSelectTreeFlatBindingfor flat data that needs to be transformed into a tree structure.
You can also customize the filtering behavior by configuring suitable filter settings to control case sensitivity and search operators.
Hierarchy Binding
Use the kendoMultiSelectTreeHierarchyBinding directive when your data is structured hierarchically with parent-child relationships. This binding approach preserves the natural tree structure and allows filtering to work across all levels of the hierarchy.
<kendo-multiselecttree
[kendoMultiSelectTreeHierarchyBinding]="data"
[filterable]="true"
childrenField="items"
textField="text"
valueField="text"
>
</kendo-multiselecttree>Flat Binding
Use the kendoMultiSelectTreeFlatBinding directive when your data is in a flat structure that needs to be transformed into a tree. This approach is ideal when working with normalized data or when parent-child relationships are defined through object fields.
The following example demonstrates how to use the flat binding directive with filtering enabled.
Filter Settings
You can fine-tune the filtering behavior by defining a filterSettings configuration object when using either of the data-binding directives. The settings allow you to control the search operator and case sensitivity, providing flexibility in how users can search through the tree data.
<kendo-multiselecttree
[kendoMultiSelectTreeHierarchyBinding]="data"
[filterable]="true"
[filterSettings]="filterSettings"
...
>
</kendo-multiselecttree>The following example demonstrates how to configure both the ignoreCase and operator filter settings.
Auto-Expanding Items while Filtering
When filtering tree data, you can control how the MultiSelectTree automatically expands nodes to reveal matching items. This feature enhances user experience by expanding relevant tree nodes, making it easier to navigate the filtered results.
To enable the auto-expanding functionality, perform the following configuration steps:
-
Use either the
kendoMultiSelectTreeHierarchyBindingorkendoMultiSelectTreeFlatBindingdirective to implement automatic filtering. -
Apply the
kendoMultiSelectTreeExpandabledirective to enable expansion control.HTML<kendo-multiselecttree [kendoMultiSelectTreeHierarchyBinding]="data" [filterable]="true" kendoMultiSelectTreeExpandable ... > </kendo-multiselecttree> -
Configure the
expandOnFilterinput provided by the expandable directive with your desired settings.HTML<kendo-multiselecttree [kendoMultiSelectTreeHierarchyBinding]="data" [filterable]="true" kendoMultiSelectTreeExpandable [expandOnFilter]="filterExpandSettings" > </kendo-multiselecttree>
You can customize the auto-expanding behavior through several configuration options. The following sub-sections demonstrate different settings that you can apply to control when and how nodes expand during filtering operations:
- Setting the Maximum Number of Expanding Items
- Expanding the Matching Items
- Persisting the Expanded Item State
Setting the Maximum Number of Expanding Items
Use the maxAutoExpandResults setting to prevent performance issues when filtering large datasets. This setting defines the maximum number of items that will be auto-expanded during filtering operations.
When the filter results exceed this threshold, the component will revert to the expanded state defined by the expandedOnClear setting, helping maintain optimal performance.
Expanding the Matching Items
The expandMatches setting controls whether matching items themselves are expanded to show their children. When enabled, this setting expands not only the parent nodes leading to matches, but also the matching nodes themselves, revealing their child items.
This option is only available in lenient filtering mode, as strict mode only displays exact matches without their children.
Persisting the Expanded Item State
The expandedOnClear setting determines which nodes remain expanded when the filter is cleared or when filter results exceed the maxAutoExpandResults limit. This setting helps maintain a consistent user experience by controlling whether the tree returns to its original expanded state or maintains some level of expansion for better navigation.
Manual Filtering
For more complex filtering requirements or when working with manual data-binding scenarios using the fetchChildren and hasChildren functions, you can implement custom filtering logic by utilizing the relevant component's events and properties.
To implement manual filtering functionality, set the filterable property to true. When filtering is enabled, the component renders a filter input in the popup list. On every character input, the component triggers a filterChange event with the typed string value that you can use to filter the data source.
The following example demonstrates how to implement manual filtering functionality in the MultiSelectTree.