Hierarchical Data Structure

Use the following properties to bind the TreeView to hierarchical data:

• items[]
  Assigns a local array as done in this demo.

• dataSource
  Assigns a DataSource object that allows you to perform data shaping operations and use a remote source.

Each object in the TreeView's hierarchical data structure should include the following fields:

• id
  Unique item identifier.

• text
  Text displayed by the item.

• items
  Nested objects (optional).

You can respectively use the keyExpr, displayExpr, and itemsExpr properties to specify custom names for the above-mentioned fields. Node objects can also include developer-defined fields and properties from this help section: items[].

In this demo, nodes use the expanded property, which specifies whether a node is collapsed or expanded. They also include the developer-defined price and image fields.

To get started with the DevExtreme TreeView component, refer to the following tutorial for step-by-step instructions: Getting Started with TreeView.