Skip to content

Tree API#

Warning

This chapter is still under construction.

Note

See also the API Reference.

This chapter describes different ways to modify the tree model using the API.

Iteration#

There are two ways to traverse the tree depth-first, pre-order:

for (const node of tree) {
  node.log();
}

tree.visit((node) => {
  node.log();
});

Both are 'fast enough' for most use cases, but the latter is slightly faster.

visit() also allows to break or skip nodes by returning a special value:

tree.visit((node) => {
  if (node.isSelected()) {
    return "skip"; // skip selected nodes and their children
  }
  if (node.title === "foo") {
    return false; // stop iteration
  }
});

Iteration is also available for subnodes:

for(const node of parentNode) {
  ...
}
parentNode.visit((node) => {
  ...
});

Related Methods

Searching#

See Search and Filter Nodes.

Selection#

See Search and Filter Nodes.

Sorting#

See Search and Filter Nodes.

Mutation#

Adding Nodes#

Removing Nodes#

Moving Nodes#

Changing Node Properties#

Changing Node State#

Changing Node Data#

Changing Node Style#

Changing Node Class#

Changing Node Attributes#

Changing Node Icons#

Changing Node Badge#

Changing Node Badge Colors#

  • node.moveTo()
  • node.setExpanded()
  • node.setSelected()
  • tree.applyCommand()

Utility Methods#

The Module util provides a number of utility methods that are useful when working with trees.

Performance Tips#

Use tree.runWithDeferredUpdate() to avoid multiple updates while changing many nodes at once.

tree.runWithDeferredUpdate(() => {
  tree.visit((node) => {
    node.setSelected(true);
  });
});