Tree Nodes Manipulations

Adding nodes

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

In case you need to add several nodes into the Tree, it's better to use the parse method

The add method 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 = webix.ui({ view:"tree",... });
 
tree.add({ value:"New item"}, 0);

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

Child node (second child)
tree = 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 = 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 = 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 = 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 the 2 appropriate methods:

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