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:

tree.checkItem("history");

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

tree.unCheckItem("history");

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"]

Opening/closing items

Open/close a certain item

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

tree.open("history");

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

tree.close("history");

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

tree.toggle("history");

Open/close all items

It is also possible to open/close all Tree items using the two corresponding methods - openAll and closeAll:

// open all tree items
tree.openAll();
// close all tree items
tree.closeAll();

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

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
    }
}
Back to top