Demos
Documentation
API
More Samples
Download Wijmo

Wijmo TreeView

The TreeView control shows hierarchical data. It enables users to collapse or expand nodes, select items, load, search, and edit data, and to use drag and drop gestures to re-organize the items if needed.

To use the TreeView control, you will normally use the following three properties:

  1. itemsSource defines the array that contains the hierarchical data. Each item in the array contains information about a node and (optionally) an array of child nodes.
  2. displayMemberPath defines the name of the property in the items that contains the text to be displayed in the tree nodes. By default, this property is set to the string 'header'.
  3. childItemsPath defines the name of the property in the items that contains the array of child nodes. By default, this property is set to the string 'items'.

Once the tree is set up, use the itemClicked or selectedItemChanged events to track user actions and handle them with the selectedItem property.

For example, the TreeView below shows a hierarchical list of products. Users may expand nodes by clicking the collapsed icons, or by pressing the right-arrow key when a node is selected.