DHTMLX Docs & Samples Explorer

Index
dhtmlxtree
Navigation and Selection in Tree

## Navigation and Selection in Tree

### Navigation Manipulation

#### Enabling Keyboard Navigation

There is the possibility to enable keyboard navigation in dhtmlxTree. Using keyboard navigation, the user can select any item in the tree and use the following keys:

- Up arrow - selects the item above the currently selected one;
- Down arrow - selects the item below the currently selected one;
- Right arrow - opens the item;
- Left arrow - closes the item;
- Enter - calls item's action;
- F2 - edits the selected item;
- Esc - closes the editor.

Keyboard navigation in the tree can be enabled/disabled in the following way:

        <script>
            tree.enableKeyboardNavigation(true|false);
        </script>

This method should be called before any of the data loading methods.

#### Assigning Navigation Keys

The user can also set new navigation keys using assignKeys() method:

        <script>
            tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]); // should be called when keyboard navigation is already switched on
        </script>

The first parameter is the name of the action, the second one indicates the key code.

### Selection Manipulation

#### Focusing Item

The method below allows to scroll to the indicated item from script:

        <script>
            tree.focusItem(itemId);
        </script>

In this case the item is not selected/highlighted.

#### Selecting Item

To select an item from script, the user should call the following command:

        <script>
            tree.selectItem(itemId,mode,preserve);
        </script>

The parameters here are as follows:

- itemId - item id;
- mode(true|false) - if set to true, script function for the selected item will be called;
- preserve(true|false) - preserve earlier selected items, it is set to false by default.

#### Clearing Selection

Method clearSelection() removes the selection of the specified item in the tree:

        <script>
            tree.clearSelection(itemId);
        </script>

#### Enabling Multiselection

Multiselection in the tree allows the user to select multiple items using Ctrl+click. Drag-and-drop is also supported in multiselection mode, as well as Cut and Paste functionality.

        <script>
            tree.enableMultiselection(mode, strict);
        </script>

The parameters are as follows:

- mode(true|false) - this parameter is responsible for enabling|disabling multiselection;
- strict(true|false) - whether the strict mode is on/off; the strict mode presupposes that only items on the same level can be objects of multiselection.

#### Enable Item Highlighting

There is the possibility to switch on item's highlighting feature - when it is on, item's label will be highlighted when the mouse pointer is over it. This feature is operated like this:

        <script>
            tree.enableHighlighting(true|false); // is switched off by default
        </script>

When this method is set to false, it is switched off, while setting it to true, switches this feature on.