TreeList Data Binding Basics
This article explains the different ways to provide data to a treelist component and the properties related to data binding. Reviewing this article will explain the basics of how you can describe the hierarchy of items in your data source to the treelist component so they can render.
For details on Value Binding and Data Binding, and the differences between them, see the Value Binding vs Data Binding article.
First, review:
- The available (bindable) features of a treelist item.
- How to match fields in the model with the treelist item data bindings.
There are two modes of providing data to a treelist, and they all use the items' features. Once you are familiar with the current article, choose the data binding more you wish to use:
Hierarchical data - separate collections of items and their child items. This is the default mode of the component. See the
Itemssetting.Flat data - a single collection of items with defined parent-child relationships. See the
IdandParentIdsettings.
In either mode, you can implement Load on Demand or lazy loading - that is, provide children to a node when it expands through an event. See the HasChildren setting and the OnExpand event.
Finally, you can also bind the TreeList to an interface, no matter if you are using flat data or hierarchical data.
TreeList Item Features
The treelist items provide the following features that you control through the corresponding fields in their data binding:
Items- the collection of child items that will be rendered under the current item. Required only when binding to hierarchical data.Id- a unique identifier for the item. Required only for binding to flat data.ParentId- identifies the parent to whom the item belongs. Required only when binding to flat data. All items with the sameParentIdwill be rendered at the same level. For a root level item, this must benull. There must be at least one node with anullparent id.HasChildren- whether the item has children. Determines whether an expand arrow is rendered next to the item in an Expandable column. Required for loading data on-demand - if you don't set it totrue, there will be no expand arrow and so there will be no way for the user to expand the item and load its children. With hierarchical data, the treelist will render the icon based on the existence of child items, butHasChildrenwill take precedence. You do not have to set or use its field unless you want to load data on demand, or override the arrow for some items.
Data Bindings
The properties of a treelist item match directly to a field of the model the treelist is bound to. You provide that relationship by providing the name of the field from which the corresponding information is to be taken. To do this, in the main TelerikTreeList tag, use the parameters described below:
- IdField => Id
- ParentIdField => ParentId
- HasChildrenField => HasChildren
- ItemsField => Items
Examples
For samples of using each data binding approach listed above, see its corresponding article:
Hierarchical data - separate collections of items and their child items. This is the default mode of the component. See the
Itemssetting.Flat data - a single collection of items with defined parent-child relationships. See the
IdandParentIdsettings.
In either mode, you can implement Load on Demand or lazy loading - that is, provide children to a node when it expands through an event. See the HasChildren setting and the OnExpand event.
Finally, you can also bind the TreeList to an interface, no matter if you are using flat data or hierarchical data.
Notes
- The TreeList is designed to work with a collection of strongly typed models (e.g.,
IENumerable<SomeDataModel>). If you provide anIEnumerable<object>instead, you must set theFieldTypeof the<TreeListColumn>instances to the data type of the fields they use (e.g.,<TreeListColumn Field=@nameof(Employee.Name) FieldType="@(typeof(string))" />).