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.


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

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:  Expand item - DHTMLX Tree

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


Related sample:  Toggle item - DHTMLX Tree

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:  Expand all items - DHTMLX Tree

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:


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

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