New to Kendo UI for AngularStart 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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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 loadOnDemand is enabled, you have to set the checkChildren property of the MultiSelectTreeCheckableSettings to false. 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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...