Configuration

Checkboxes for items

dhtmlxTree provides enhanced system of checkbox manipulations. In addition to standard two-state checkboxes that allow check/uncheck tree items, it also uses three-state checkboxes that include an intermediate state, when just some children of a parent item are checked.

In order to enable checkboxes for items, make use of the checkbox configuration option:

var tree = new dhx.Tree("tree_container", {checkbox: true});

Custom folders

There is a possibility to render some custom folders in a tree. You can define whether a tree item should be rendered as a folder, with the help of the isFolder configuration option:

var tree = new dhx.Tree("tree_container", {isFolder: function() {
    return true;
}});

The property takes as a value a callback function that should return true for the items that are to be displayed as folders in a tree.

Key navigation

You can switch on key navigation in a tree with the keyNavigation property before initialization of the component:

var tree = new dhx.Tree("tree_container", {keyNavigation: true});

After that you need to select any item and then apply Arrow keys:

  • Up arrow key - to move selection to the item above the currently selected one
  • Down arrow key - to move selection to the item below the currently selected one
  • Right arrow key - to open a selected folder
  • Left arrow key - to close a selected opened folder

Editing of items

It is possible to enable editing of the text of Tree items before initialization of the component using the editing configuration property:

var tree = new dhx.Tree("tree", {editing: true});

Related sample:  Editing - DHTMLX Tree

Back to top