TreeView and TreeNode

TreeView

The Treeview control displays a hierarchy of nodes. Here is an image of a tree view that renders the DOM hierarchy of an HTML page:

1. Accessing, adding and removing tree nodes

The top-level nodes are stored in the TreeView.items collection. Each node in the hierarchy might contain other nodes, which are accessible through the TreeNode.items property. Nodes can be added and removed programmatically by using the add and remove methods of the corresponding collection.

JavaScript

treeView = new ui.TreeView(document.getElementById("treeView"));
treeView.width = treeView.height = ui.Unit.percentage(100);
treeView.theme = theme;// create a tree node that will be a root in our hierarchy
var root = new ui.TreeNode("body");
treeView.items.add(root);// create a node for the child element
var childNode = new ui.TreeNode(child.outerHTML.split("\n")[0]);
childNode.data = child; // associate DOM element with node
root.items.add(childNode);

The TreeView like all other MindFusion.Common.Control-instances requires to be associated with an HTML element:

HTML

<div style="position: absolute; top: 0px; bottom: 50%; right: 0px; width: 300px;">
    <div id="treeView">
   </div>
</div>

Nodes can also be created by loading a data object or a JSON string, containing the nodes data, by using the fromObject and fromJson methods respectively.

2. Selecting nodes

Tree nodes can be selected and deselected programmatically by using the selectNode and deselectNode methods.

3. Customization

The control supports lazy loading, which is enabled by default, meaning that child nodes DOM will not be created until their parent node is expanded. The full list of nodes (loaded and not) can be accessed through the flatItems property and the currently loaded nodes - through the loadedItems property. Lazy loading can be switched off by setting the loadOnDemand property to false.

JavaScript

var firstNode = treeView.flatItems.items()[0];
var loadedNodesCount = treeView.loadedItems.count();

The appearance of the control can be modified by setting its theme and cssClass properties.

4. Drag and drop

Drag and drop capabilities are enabled by default, and can be disabled on a control level by setting the allowDrag property to false.

JavaScript

var treeView = new ui.TreeView(document.getElementById("treeView"));
treeView.width = treeView.height = ui.Unit.percentage(100);
treeView.allowDrag = false;

To disable drag operations only for a specific item, set its interactive property to false. Child nodes can only be dragged and dropped within their parent node.

JavaScript

var root = new ui.TreeNode("body");
root.interactive = alse;
treeView.items.add(root);

5. Events

Important events for the TreeView include:

• selectionChanging - a validation event, raised when the selection collection is changing.
• selectionChanged - a notification event, raised when the selected collection is changed.
• itemClick - a notification event, raised when a tree node is clicked.

JavaScript

treeView.itemDrag.addEventListener(nodeDrag);function nodeDrag(sender, args)
{
 treeView.allowDrop = true;}

6. Serialization

The nodes data can be serialized to a JSON string via the toJson method and deserialized from a JSON string via the fromJson method.

TreeNode

The TreeNode class represents an expandable list item. The collection of child items is accessible through the TreeNode.items property. A tree node displays the text, specified by its title property, and, optionally, an icon, specified by its imageSrc property, or its content can be set to a custom HTML string via its template property. Expandable tree nodes also display an icon, showing their expanded/collapsed state.
The state of a treeNode can be set programmatically through its expanded property.

JavaScript

// create a tree node that will be a root in our hierarchy
var root = new ui.TreeNode("body");
treeView.items.add(root);// create a node for the child element
var childNode = new ui.TreeNode(child.outerHTML.split("\n")[0]);
childNode.data = child; // associate DOM element with node
root.items.add(childNode);