New to Kendo UI for Vue? Start a free 30-day trial

Data Binding

The TreeView enables you to work with various types of data.


To bind the TreeView to data:

  1. Add children items to an item with an items field.
  2. Configure the data property.
View Source
Change Theme:

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.

View Source
Change Theme:

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.
View Source
Change Theme: