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:
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")); // create a tree node that will be a root in our hierarchy // create a node for the child element |
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> |
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]; |
The appearance of the control can be modified by setting its theme and cssClass properties.
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")); |
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"); |
JavaScript
![]() |
---|
treeView.itemDrag.addEventListener(nodeDrag); function nodeDrag(sender, args) } |
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 // create a node for the child element |