DHTMLX Docs & Samples Explorer

Navigation in Grid

Keyboard Navigation

Keyboard navigation is available in dhtmxGrid. The following keys should be used for this purpose:

  • Tab - change to the next cell in a row;
  • Shift+Tab - change to the previous cell in a row;
  • Up, Down arrows - change to the previous|next row;
  • Enter - close cell if used in “edit cell” mode;
  • Space - change state if used on a checkbox or a radio button;
  • F2 - edit cell;
  • Esc - finish editing.

Enabling Hot Keys

The following method is responsible for enabling/disabling hot keys in the grid:

    <script>
        grid.enableKeyboardSupport(true|false); // true by default
    </script>
 

Control over Tab-Order

Setting Custom Column Tab-Order

The user can specify order of grid columns that will be activated by tab. The parameter here is order - list of tab indexes (default delimiter is ”,”):

    <script>
        grid.setTabOrder("1,2,3,4"); // the direct tab order, list of tab indexes
            // or
        grid.setTabOrder("4,3,2,1"); // the inverse tab order, list of tab indexes
    </script>
 

Tabbing Through Editable Cells

There is also the possibility to set tabbing through editable cells only in the following way:

    <script>
        grid.enableEditTabOnly(true); // false to disable
    </script>
 

Tab in Grid/Tab out of Grid

Starting from dhtmlxGrid 1.6, the user can control page elements that precede/succeed the grid in tab order. For example, if the layout is like this:

    <input type="text" id="input1" />
    <div id="gridbox"></div>
    <input type="text" id="input3" />
 

The user can apply a simple JS command to set the direct tab order. The parameters that should be specified are:

  • start - an HTML object or its id, gets focus when tab+shift are pressed in the first cell;
  • end - an HTML object or its id, gets focus when tab is pressed in the last cell.
    <script>
        grid.setExternalTabOrder("input1","input3");
    </script>
 

After this code line, pressing the tab key in input1 will move the focus to the grid, while tabbing from the last cell of the grid will move the focus to input3.

Light Mouse Navigation

Light Mouse Navigation mode enables:

  • Moving row selection with the mouseover;
  • Cell the editor with a single click.
    <script>
        grid.enableLightMouseNavigation(true|false);
    </script>
 

Different Keymaps in Grid

Starting from v1.5, the user can choose between one default and 2 predefined (MS Excel like, MS Access like) keymaps. To switch from the default keymap, the user should include necessary JS files into the page (will effect all grids on page):