Skip to main content

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() method. 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 itemstree.expandAll();// collapse all tree itemstree.collapseAll();

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:

mode(string) the type of an editor:
  • "text" for an input
  • "select" for a select
options(array) optional, an array of additional options

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 treevar treeState = tree.getState(); // restoring the state of a treetree.setState(treeState);

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:

selected(number) the status of a checkbox of an item:
  • 0 - unselected
  • 1 - selected
  • 2 - indeterminate (for the parent item, in case its children are partially checked)
open(boolean) checks whether a tree item is open (for folders with items)

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:

config(object) the configuration object of the added item
index(number) optional, the position to add an item at
parent(string) the ID of the future parent item{"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:

idthe id of the item
configan object with new configuration of the item

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.