Introduction

The tree control makes it easier to show structured information. An example of a tree would be folder bar in Windows Explorer. JSForms tree is similar, but with more features and more styles.

Usage

A tree is used to show structured information organized in several layers. Each node can have child nodes with additional details or additional data. Tree is a tool (when used appropriately) that can make it easier and more efficient to work with a large set of data items.

Features

• Columns - One of the most unique JSForms tree features is columns support. They can be used to show additional data for each node.
• Add / Delete / Rename - Each node supports add/delete/rename operations. In addition user interaction is supported (i.e. if a user attempts to delete a node he will be asked to confirm).
• Customizing - Like other controls, tree style can be customized using CSS and tree behavior using behaviors mechanism.
• Context menu - The tree supports context menu. It comes with a pre-defined one, but it can be customized. As an alternative you can provide your own menu.
• Category icons - Each node can belong to some category and for each category it is possible to specify a node icon using CSS.
• Collapse / expand - Each node with child nodes can be collapsed or expanded to hide or show child nodes. It's also possible to collapse or expand a node and all child nodes in a single operation (expand all / collapse all).
• Drag and drop support - It’s possible to move node to a new parent. This feature works only in IE for now, but in the future it will be expanded to work in all browsers (as soon as I add drag and drop simulation module).
• Keyboard support - In IE it is possible to use the keys to navigate and manipulate the tree. The feature doesn’t work well in other browsers since the tree nodes never gain focus in them and thus keyboard events never fire for the tree. I will address the issue in the future.

Limitations

Currently there is a number of limitations. Some of them will be addressed in the upcoming versions. For more details consult JSForms Tree documentation.

Examples

Client-side examples

Examples of how controls behave on the client side, when all HTML and JavaScript is already preared.

• Simple Tree - Shows how to define a tree without columns using only HTML.
• Edit Simple Tree - Example of how to edit tree on the fly.
• Simple Tree - Big - Demonstration of a large tree.
• Advanced Tree - More complicated example of a tree with columns and root node.
• Edit Advanced Tree - Example showing how to modify a tree with columns.
• Advanced Tree - Big - Large tree with columns to help evaluate performance.

Server-side examples

Examples of how to generate HTML for the tree control.

• Tree using ASP - Generates tree from database using ASP.