buy now
log in
MindFusion

JS TreeView

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

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.

JS TreeView

Tree Nodes

Each tree can contain unlimited levels of ree nodes and each node - unlimited number of child nodes. The siize 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 droped and multiple nodes selected simulteniously. Items can be loaded on demand to increase performance.

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

JavaScript TreeView: User Interaction

Appearance

The tree size can be changed and the tree orientation can be horizontal or vertical. A set of properties allow you to speciy 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 proeprty, 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

JavaScript TreeView: Earth Theme
JavaScript TreeView Sample

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 deselct 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

JavaScript TreeView Class

MindFusion Pack for JavaScript

Copyright © 2001-2019 MindFusion LLC. All rights reserved.
Terms of Use - Contact Us