Skip to main content

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

Related sample: Tree. Checkboxes For Items

Editing of items#

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

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

Related sample: Tree. Editable

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 keyto move selection to the item above the currently selected one
Down arrow keyto move selection to the item below the currently selected one
Right arrow keyto open a selected folder
Left arrow keyto close a selected opened folder

Related sample: Tree. Key Navigation

Selection of items#

Related sample: Tree. Disable Selection

The default configuration of Tree provides you with the selection feature that allows highlighting a Tree item. To disable selection in a Tree you need to set the selection configuration property to false:

const tree = new dhx.Tree("tree_container", {    selection: false,});