JS TreeView

An easy way to render hierarchical data and style it as you wish.

An Elegant and Responsive TreeView Control

Packed with various appearance settings and a rich event set, this library is all you need to create the perfect tree in JavaScript.

Tree Nodes

Each tree can contain unlimited levels of tree nodes and each node - unlimited number of child nodes. The size and image of each node is customized. Nodes can render tooltips and accept drag and drop. Data for tree nodes can be set through templates or data objects.

Online Sample: A Project Management Application
API Overview: TreeNode

Interaction

Users can perform a variety of actions on a tree view and you can specify which of them are allowed. Tree nodes can be dragged and dropped and multiple nodes selected simultaneously. Items can be loaded on demand to increase performance.

Online Sample: Interactive Tree
Tutorial: Dynamic TreeView with a Context Menu

Appearance

The tree size can be changed and the tree orientation can be horizontal or vertical. A set of properties allow you to specify the exact location of the tree on the page.

Online Sample: Tree with Icons

Styling and Themes

The Tree applies CSS styling through the themes shared by all MindFusion UI controls. You can edit the predefined themes or create your own ones. There is also a special cssClass property, which allows you to assign a custom CSS class to the TreeView, whose styling settings take precedence over the theme.

Online Sample: TreeView in Earth Theme

Methods

A set of useful methods are exposed by the TreeView control. They allow you to access programmatically items, load the tree data from objects or Json strings, select and deselect items.

Online Sample: World Observatories JavaScript Sample
API Reference: TreeView and TreeNode

Events

Various events are raised by the TreeView control to inform you of any action the user is performing or has performed on the tree and its items. They include item drag and drop, mouse movement, selection of items as well click on nodes. You can cancel some of the actions.

Online Sample: Dom Inspector with TreeView
Online Documentation: The TreeView Class