TreeView for JavaScript

Organize your hierarchical data into our user-friendly TreeView component. Wijmo's TreeView can be used for navigation, selection or data visualization.

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 Hierarchical Data Demo

Navigation Trees

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

Try the Navigation Trees Demo

Accordion Trees

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

Try the Accordion Trees 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 Checkboxes Demo

Images

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

Try the Images Demo

Disabled Nodes

Disabled nodes cannot be selected using the mouse or keyboard.

Try the Disabled Nodes 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 Custom Nodes Demo

Lazy Loading

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

Set the items property in the parent node data item to an empty array.
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 Lazy Loading Demo