Work with Tree

Working with checkboxes

You can enable checkbox for tree items with the checkbox configuration option. Then you can manipulate items with checkboxes with the help of Tree API.

Check/uncheck checkboxes

To check the checkbox of a particular tree item, apply the checkItem. It takes the id of an item as a parameter:


The uncheckItem method will uncheck a tree item by its id together with its sub-items.


Related sample:  Tree. Check/Uncheck Item

Get checked checkboxes

There is a possibility to get the list of all checked items in a tree with the getChecked method. It returns an array of ids of checked items, e.g.:

tree.getChecked(); // -> ["jmf", "rle", "sk", "km", "af", "jw"]

Related sample:  Tree. Get Checked Items

Expanding/collapsing items

Expand/collapse a certain item

To expand a particular folder in a tree by its id, use the expand method:


To collapse a tree item, make use of the collapse method:


Related sample:  Tree. Expand Item

You can also alternately expand/collapse a tree item (folder) via the toggle method:


Related sample:  Tree. Toggle Item

Expand/collapse all items

It is also possible to expand/collapse all Tree items using the two corresponding methods - expandAll and collapseAll:

// expand all tree items
// collapse all tree items

Related sample:  Tree. Expand All Items

Editing an item

There is the editItem method that allows editing a certain tree item. Pass the id of an item to the method to initiate editing:


Related sample:  Tree. Edit Item

The method can also take a second parameter to configure the editing process. It may include two properties:

Setting/getting Tree state

You can get/set the state of a tree using the Tree API - setState and getState. getState() returns an object with the state of a tree, while setState() takes an object with tree state as a parameter:

// getting the state of a tree
var treeState = tree.getState();
// restoring the state of a tree

Related sample:  Tree. Getting Tree State

Related sample:  Tree. Setting Tree State

The treeState object contains key:value pairs, where key is the id of a tree item and value is its state. The state object of a tree item includes two properties:

Here is an example of a treeState object:

    "books": {
        "open": true,
        "selected": 2
    "mystery": {
        "open": true,
        "selected": 2
    "bsthrillers": {
        "selected": 1
    "rc": {
        "selected": 0
    "ir": {
        "selected": 1
    "history": {
        "selected": 0
    "jmf": {
        "selected": 0
    "jd": {
        "selected": 0

Using Tree Collection API

You can manipulate Tree items with the help of the Tree collection API.

Adding items into Tree

It is possible to add more items into the initialized Tree on the fly. Use the add() method of Tree Collection. It takes three parameters:{"value": "Life"}, -1, "Magazines");

Related sample:  Tree. Adding Data

Updating Tree items

You can change config options of the item via the update() method of Tree Collection. It takes two parameters:

For example, you can change the value of an item:"item_id", {value: "New value"});

Related sample:  Tree. Data Update

Removing items from Tree

To remove an item, make use of the remove() method of Tree Collection. Pass the id of the item that should be removed to the method:"id");

Related sample:  Tree. Delete Data

Check the full list of Tree collection API.

Back to top