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 the getItem method:

Getting the node object

var tree = 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, the node variable from the code snippet above looks as in:

var 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

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

refresh and updateItem work to the same effect.

Getting the node index

To get the index of a node in the branch (counting from 0), you should use the getBranchIndex method:

Getting the node index

var tree = 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 advise using it. It's a common method that is inherited by all data components from the DataStore class and not 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

var tree = 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