New to Kendo UI for Angular? Start a free 30-day trial

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 nodes which will be rendered in a tree-like structure inside the MultiSelectTree.
  • textField (string | string[])Determines the node field that will be displayed.
  • valueField (string | string[])Determines the node field which will be used as item identifier.
  • hasChildren ((node: any) => boolean)Determines if a given node has children.
  • fetchChildren ((node: any) => Observable<any[]>)Supplies the child nodes based on the provided parent.

To render a hierarchical set of data, implement the fetchChildren and hasChildren functions or use the build-in directives.

Example
View Source
Edit In Stackblitz  
Change Theme:

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:

The built-in data-binding directive work only with the complete data set. Lazy-loading of child nodes is not supported by the directives.

Hierarchy Binding Directive

To utilize the Hierarchy Binding directive, provide to the directive selector the desired data set and specify a childrenField value which is going to be used to identify the child node collections.

The follwoing example demonstrates the kendoMultiSelectTreeHierarchyBinding directive in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Flat Binding Directive

To utilize the Flat Binding directive, provide to the directive selector the desired data set. The relations between the nodes is determined by the specified valueField and parentIdField. The valueField serves as item identifier, while the parentIdField value should point to the valueField of the node's parent. If the parentIdField value does not point to any other element, that node is going to be rendered at root level.

The follwoing example demonstrates the kendoMultiSelectTreeFlatBinding directive in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Lazy Loading of Nodes

The following example demonstrates how to fetch the child nodes on demand, only after they have been expanded.

Note that the MultiSelectTree doesn't cache the child nodes by default. To avoid fetching the nodes again on subsequent collapse-expand iterations, cache the already loaded nodes manually.

Example
View Source
Edit In Stackblitz  
Change Theme:

Heterogenous Data

The MultiSelectTree can also be bound to heterogenous data - i.e. different valueField and textField value at each level. To configure the component to use different fields for each next level, supply to the valueField and textField props arrays of strings. The nodes will use as value and text the field on the corresponding level.

Example
View Source
Edit In Stackblitz  
Change Theme: