Getting/Setting the Node

Tree provides a set of methods for manipulating the node value and retrieving the node id.

Getting the node object/value

To get the node object, you should use method getItem:

Getting the node object

tree = new webix.ui({
    view:"tree",
    data: [
        { id:"branch1", value:"The Shawshank Redemption", data:[
            { id:"part1", value:"Part 1" },
            { id:"part2", value:"Part 2" }
        ]}
    ]
}); 
 
//'node' variable will contain an object of the related tree node
var node = tree.getItem('branch1');
 
//you can access data members directly
var value = node.value; // ->"The Shawshank Redemption"

Item object has the following properties:

• id - (string) the item id
• value - (string) the item value
• $level - (number) the level of nesting (one-based numbering)
• $parent - (string) the id of the item's parent
• $count - (number) the number of children
• open - (boolean) defines whether the node is collapsed or expanded (just for parent nodes)

For example, variable node from the code snippet above looks as in:

node = {
    $count: 2,
    $level: 1,
    $parent: 0,
    id: "branch1",
    open: true,
    value: "The Shawshank Redemption"
}

Setting the node value

To change the current value of a node (the node title), you should use the following technique:

Changing the node title

tree = new webix.ui({ view:"tree",...});
 
var nodeObj = tree.getItem(node_id);
nodeObj.value = new_value;
 
tree.refresh();
//or
tree.updateItem(node_id, nodeObj);

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

Getting the node index

To get the index of a node in the branch (zero-based numbering) you should use the getBranchIndex method:

Getting the node index

tree = new webix.ui({
    view:"tree",
    data: [
        { id:"branch1", value:"The Shawshank Redemption", data:[
            { id:"1.1", value:"Part 1" },
            { id:"1.2", value:"Part 2" }
        ]}
    ]
});
 
var index  = tree.getBranchIndex('1.1'); // -> 0
var index1 = tree.getBranchIndex('1.2'); // -> 1

There is also the getIndexById method to get the node index but we don't suggest using it. It's a common method that is inherited by all data-containing components from the DataStore class and not intended for using with tree-like data structures.

Getting the node id

To get the id of a node you can use one of the following methods:

Table 1 Methods for getting the node id

Method	Description
getIdByIndex	returns the item id by its index
getParentId	returns the id of the parent node
getFirstChildId	returns the id of the first child of the specified branch. If there are not any, returns null
getNextSiblingId	returns the id of the next sibling of the specified node
getPrevSiblingId	returns the id of the previous sibling of the specified node

Getting the parent node id

tree = new webix.ui({
    view:"tree",
    data: [
        { id:"branch1", value:"The Shawshank Redemption", data:[
            { id:"part1", value:"Part 1" },
            { id:"part2", value:"Part 2" }
        ]}
    ]
});
 
var parent = tree.getParentId('part1'); // -> 'branch1'

Back to top