Data Binding
The MultiSelectTree provides core settings for data binding scenarios and enables you to work with various types of data.
Basics
The MultiSelectTree exposes the following core data-binding options:
data(any[])—Binds the items which will be rendered in a tree-like structure inside the MultiSelectTree.textField(string | string[])—Determines the item field that will be displayed.valueField(string | string[])—Determines the item field which will be used as item identifier.hasChildren((node: any) => boolean)—Determines if a given item has children.fetchChildren((node: any) => Observable<any[]>)—Supplies the child items based on the provided parent.
To render a hierarchical set of data, implement the fetchChildren and hasChildren functions or use the built-in directives.
Built-in Directives
The built-in data-binding directives provide specialized implementations of the required callbacks and events, simplify data binding, minimize boilerplate code, and support flat or heterogeneous data.
The MultiSelectTree supports the following built-in directives:
kendoMultiSelectTreeHierarchyBinding—Handles the binding to hierarchical data.kendoMultiSelectTreeFlatBinding—Handles the binding to flat data by mapping the data to a hierarchical structure and by using the configured parent-child relations.
The built-in data-binding directives work only with the complete data set and do not support lazy-loading for the child items.
Hierarchy Binding Directive
To utilize the hierarchy binding directive, provide to the directive selector the desired data set and specify a childrenField value which will be used to identify the child item collections.
The following example demonstrates the kendoMultiSelectTreeHierarchyBinding directive in action.
Flat Binding Directive
To utilize the flat binding directive, provide to the directive selector the desired data set. The relations between the items is determined by the specified valueField
and parentIdField. The valueField serves as item identifier, while the parentIdField value has to point to the valueField of the item's parent. If the parentIdField value does not point to any other element, that item will be rendered at root level.
The following example demonstrates the kendoMultiSelectTreeFlatBinding directive in action.
Lazy Loading of Items
To enable lazy loading of the component items, set the loadOnDemand property to true. By default loadOnDemand is set to false.
The MultiSelectTree doesn't cache the child items by default. To avoid fetching the items again on subsequent collapse-expand iterations, cache the already loaded items manually.
When
loadOnDemandis enabled, you have to set thecheckChildrenproperty of theMultiSelectTreeCheckableSettingstofalse. Otherwise, after a checked item gets expanded and its inner items are loaded, the selected value and the checked items in the drop-down will no longer be in sync. Currently, such a scenario is not supported.
The following example demonstrates how to fetch the child items on demand, only after they have been expanded.
Heterogenous Data
You can also bind the MultiSelectTree to heterogenous data, that is, to a different valueField and textField value at each level.
To configure the component to use different fields for each next level, supply the valueField and textField properties with arrays of strings. The items will use the field on the corresponding level as their value and text.