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:

tree.checkItem("history");

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

tree.uncheckItem("history");

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:

tree.expand("history");

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

tree.collapse("history");

Related sample: Tree. Expand item

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

tree.toggle("history");

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
tree.expandAll();
// collapse all tree items
tree.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:

tree.editItem(id);

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" (by default) for an input "select" for a select
options	(array) optional, an array of additional options This property works only with mode: "select"

For instance:

tree.events.on("itemDblClick", function (id) {
    tree.editItem(id,{ mode: "select", options: [1, 2, 3, 4, 5] });
});

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

tree.data.add({"value": "Life"}, -1, "Magazines");

Related sample: Tree. Adding and removing items

Updating Tree items

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

id	the id of the item
config	an object with new configuration of the item

For example, you can change the value of an item:

tree.data.update("item_id", {value: "New value"});

Or you can disable displaying of a checkbox for a tree item:

tree.data.update("Books", {checkbox:false});

Getting parent of item

You can get the parent of an item using the getItem method of tree collection.

tree.data.getItem("Thrillers").parent
// "Books"

tree.data.getItem("Books").parent
// "_ROOT_u1574768464563"

where

• parent - (string) the id of the parent of a tree item

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:

tree.data.remove("id");

Related sample: Tree. Adding and removing items

note

Check the full list of Tree collection API.