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");

Related sample:  Check/uncheck item - DHTMLX Tree

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:  Get checked items - DHTMLX Tree

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

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

tree.toggle("history");

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

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:

tree.editItem(id);

Related sample:  Edit item - DHTMLX Tree

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);

Related sample:  Getting Tree state - DHTMLX Tree

Related sample:  Setting Tree state - DHTMLX 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
    }
}

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:  Adding data - DHTMLX Tree

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"});

Related sample:  Data update - DHTMLX Tree

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:  Delete data - DHTMLX Tree

Check the full list of Tree collection API.

Back to top