Data Binding
The DropDownTree provides core settings for data binding scenarios and enables you to work with various types of data.
Basics
The DropDownTree exposes the following core data-binding options:
data(any[])—Binds the items which will be rendered in a tree-like structure inside the DropDownTree.textField(string)—Determines the item field that will be displayed.valueField(string)—Determines the item field which will be used as an 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.
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 DropDownTree supports the following built-in directives:
kendoDropDownTreeHierarchyBinding—Handles the binding to hierarchical data.kendoDropDownTreeFlatBinding—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 the directive selector with the desired data set and specify a childrenField value which will be used to identify the child item collections.
The following example demonstrates the kendoDropDownTreeHierarchyBinding directive in action.
Flat Binding Directive
To utilize the flat binding directive, provide the directive selector with the desired data set. The relations between the items is determined by the specified valueField
and parentIdField. The valueField serves as an 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 kendoDropDownTreeFlatBinding directive in action.
Lazy Loading of Items
The following example demonstrates how to fetch the child items on demand, only after they have been expanded.
The DropDownTree 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.
Heterogenous Data
You can also bind the DropDownTree 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 level that follows, 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.