Data Binding

The Kendo UI for Vue TreeView enables you to work with various types of data.

Basics

To bind the TreeView to data:

1. Add children items to an item with an items field.
2. Configure the data property.

Item Fields

By default, the TreeView provides the following fields for its items:

• text—The string representation of the item.
• items—The children of the item.
• expanded—If set to true, expands the item.
• selected—If set to true, selects the item.
• disabled—If set to true, disables the item.
• checked—If set to true, checks the item.
• checkIndeterminate—If set to true, applies an indeterminate check to the item.
• hasChildren—If set to true, notifies the TreeView that the item has children even if they are not initially passed. Used for implementing the load-on-demand feature.

Apart form items, you can replace each of the default TreeView fields with custom ones. To include your own fields, set the corresponding TreeView property to the name of the custom field. The TreeView also supports the nesting of its item fields.

Loading Data on Demand

The following example demonstrates how to fetch remote data and bind the TreeView to it.

To implement the load-on-demand feature:

1. Set the hasChildren field of the root items.
2. Provide their children afterwards.

Suggested Links

• onExpandChange
• API Reference of the TreeView