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 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.

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 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.

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 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Lazy Loading of Items

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

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme: