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:
Note, you can use the getBranchIndex method to get the position of a node by its id (read more).
Nesting level | Example |
---|---|
Root node |
![]() |
Child node (first child) |
![]() |
Child node (second child) |
![]() |
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);
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.
Tree nodes are collapsed and expanded
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:
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);
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'
Read more on the topic in article Filtering in Tree.
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)
Read more on the topic in article Sorting in 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