Tree Nodes Manipulations

Adding nodes

Generally, to add a node (parent or child) you should use the add method. At what position the element will be added depends on parameters you pass to the method.

Method add accepts 3 parameters:

  • obj - the item object
  • pos - the position that the new item should have after being inserted into the tree (zero-based numbering).
    Note,
    • 0 - the item will be added as the first child (start position)
    • -1 - the item will be added as the last child (end position)
  • parent - (optional) the parent node id. If it's not specified, the item will be added to the root of the tree

Note, you can use the getBranchIndex() method to get the position of a node by its id (read more).

Table 1 Adding nodes
Nesting level Example
Root node
tree = new webix.ui({ view:"tree",... });
 
tree.add({ value:"New item"}, 0);

Child node (first child)
tree=new webix.ui({view:'tree',..});
 
var parentId= tree.getSelectedId();
tree.add( {value:"New item"}, 0, parentId);

Child node (second child)
tree=new webix.ui({view:'tree',..});
 
var parentId = tree.getSelectedId();
var pos = tree.getBranchIndex("node2"); //'node2' is the 'Skoda' item's id
 
tree.add( {value:"New item"}, pos, parentId);

Deleting nodes

To delete a node (parent or child) you should use the remove method and specify the id of the required node there:

Deleting the currently selected node

tree = new webix.ui({ view:"tree",... });
 
var nodeId = tree.getSelectedId();
tree.remove(nodeId);

Selecting nodes

To select a specific node you should call the select method:

Selecting a node

tree = new webix.ui({ view:"tree",... });
 
tree.select("node2");// 'node2' is the item id


For more details, read article Items Selection.

Expanding/collapsing branches

Tree nodes are collapsed and expanded

  • by clicking on a "+/-" icon or a node (default behavior);
  • by clicking on a node text provided that activeTitle property is defined for the tree.
view:"tree", 
activeTitle:true, //false by default
data:[...]

Related sample:  Tree: JSON Dataset

Tree provides several methods to manage 'open'/'close' state of a node. They are:

Table 1 Managing 'open'/'close' state of a node
Method Description
open opens the branch with the specified id
close closes the branch with the specified id
openAll opens all branches in the tree
closeAll closes all branches in the tree
isBranchOpen checks whether the specified branch is opened
getOpenItems returns ids of the opened branches

Checking whether the currently selected branch is opened

tree = new webix.ui({ view:"tree",... });
 
var nodeId = tree.getSelectedId();
tree.isBranchOpen(nodeId);

Filtering nodes

To filter the tree nodes you should call the filter method:

Filtering the tree

tree = webix.ui({ view:'tree', ...});
 
tree.filter("#value#", "abc");//leaves in the tree just items that contain text 'abc'

Related sample:  Filtering

Read more on the topic in article Filtering in Tree.

Sorting nodes

To filter the tree nodes you should call the sort method:

Ascending sort in the tree

tree = webix.ui({ view:'tree', ...});
 
tree.sort("#value#", "asc");//sorts all nodes (parent, child)

Related sample:  Sorting

Read more on the topic in article Sorting in Tree.

Updating the tree

To update the tree you may call one of 2 appropriate methods:

  • update
  • refresh

Methods lead to one and the same result and don't have any specificity.

tree.refresh();
//or
tree.updateItem(node_id, nodeObj);
Back to top