More Samples
Download Wijmo

TreeView Nodes

In most cases, you can work with a TreeView using only its data-binding and selection properties, and the original data items bound to the tree.

There are a few scenarios where you may need access to properties of the TreeNode objects that make up the actual tree.

You can get the TreeNode that corresponds to a given data item by calling the TreeView's getNode method, or use the nodes property to get the collection of root nodes on the TreeView.

Once you have a node, you can use its properties and methods to inspect or modify the tree. These properties and methods include:

  • dataItem: Gets the item in the data source that is bound to this node.
  • element: Gets the HTML element that represents this node.
  • ensureVisible: Expands parent nodes and scrolls the TreeView as needed to ensure the node is currently visible.
  • select: Selects the node and ensures it is visible.
  • parentNode: Gets a reference to the node's parent node.
  • index: Gets the index of this node in the node collection that contains it.
  • level: Gets the node's level in the outline structure. Top level nodes have level zero.
  • nodes: Gets an array containing the node's child nodes.
  • previous, next, previousSibling, nextSibling: Get references to adjacent nodes on the tree, optionally excluding collapsed or non-sibling nodes.
  • isChecked, isCollapsed, isDisabled: Get or set values that change the state of the node.

For example, click the button below to scan the visible nodes on the TreeView. Try expanding and collapsing some nodes to see the difference when you click the button: