Display hierarchical data

The TreeView's hierarchical structure and auto-search functionality make it easy for users to drill-down and find the items they are interested in.

Try the demo

Navigation Trees

Navigation trees are the simplest and most commonly created TreeView controls.

Try the demo

Accordion Trees

Create a TreeView with multi-pane panels to use for navigation.

Try the demo

Checkboxes

When checkboxes are displayed, the TreeView manages their hierarchy so that when a checkbox is checked or cleared, the new value is automatically applied to all child nodes, and reflected on the state of the parent nodes.

Try the demo

Images

Use the imageMemberPath property to add images to nodes by specifying the name of a property on the data items that contains an image URL.

Try the demo

Disabled Nodes

Disabled nodes cannot be selected using the mouse or keyboard.

Try the demo

Custom Nodes

You can customize the content of the TreeView nodes using the formatItem event. The event handler parameters include the element that represents the node and the data item being rendered.

Try the demo

Lazy loading

Only two steps are required to implement lazy loading with Wijmo TreeView.

  1. Set the items property in the parent node data item to an empty array.
  2. Set the TreeView's lazyLoadFunction property to a function to be called when the user expands the node. This function takes two parameters: the parent node and a callback function to be invoked when the data becomes available.

Try the demo