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", {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 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

Related sample:  Tree. Key Navigation

Back to top