Check documentation for the latest version of dhtmlxSuite Enabling Keyboard Navigation DHTMLX Docs

Enabling Keyboard Navigation

The library provides support for different keyboard commands that let users to navigate through the grid.

Users have the possibility to choose between 3 keymaps:

Native keymap

Initially, dhtmlxGrid has the keyboard navigation enabled.
To disable it call the enableKeyboardSupport method with the false parameter:

Disabling default navigation in the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.enableKeyboardSupport(false);

Related sample:  Light mouse navigation


Table 1 Native keymap commands
Command Description
Enter closes the editor. Changes are saved
ESC closes the editor for a cell. Changes aren't saved
F2 opens the editor for a cell
Space changes the state if the cell is a check box or a radio button
Tab moves one cell to the right
Tab+Shift moves one cell to the left
Up, Down arrow keys moves one row up/down

MS Excel keymap

To switch from the native to the MS Excel keymap use the enableExcelKeyMap() command:

Activating the MS Excel keymap in the grid

<link href="../codebase/dhtmlx.css" rel="stylesheet">
<script  src="../codebase/dhtmlx.js"></script>
 
<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
    mygrid.init();
    mygrid.enableExcelKeyMap(); </script>

Related sample:  Keymap - excel


Table 2 MS Excel keymap commands
Command Description
Enter moves one cell down. The cell editor isn't opened
Enter + Ctrl closes the cell editor. Doesn't move anywhere
Enter + Shift moves one cell up. The cell editor isn't opened
Tab moves one cell in a row to the right. The cell editor isn't opened
Tab+Shift moves one cell to the left. The cell editor isn't opened
F2 opens the cell editor
ESC closes the editor for a cell. Changes aren't saved
PGUP moves to the next page (if the paging mode is enabled and some cell is selected)
PGDN moves to the previous page (if the paging mode is enabled and some cell is selected)
Up, Down, Left, Right arrow keys moves one row up/down/left/right
Ctrl + Left, Right arrow keys moves to the first/last cell in the row
Ctrl + Up, Down arrow keys moves to the first/last cell in the column
Ctrl + Shift + Up, Down arrow keys selects all rows from the current to the first/last row
Ctrl + Home moves to the top left cell in the grid
Ctrl + End moves to the bottom right cell in the grid
Shift + Up, Down arrow keys selects a massive of rows
Home moves to the first cell in the current row
End moves to the last cell in the current row

MS Access keymap

To switch from the native to the MS Access keymap, use the enableAccessKeyMap() command:

Activating the MS Access keymap in the grid

<link href="../codebase/dhtmlx.css" rel="stylesheet">
<script  src="../codebase/dhtmlx.js"></script>
 
<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
    mygrid.init();
    mygrid.enableAccessKeyMap();   </script>

Related sample:  Keymap - access


Table 3 MS Access keymap commands
Command Description
Enter moves one cell to the right and opens the cell editor
Enter + Ctrl closes the cell editor. Doesn't move anywhere
Enter + Shift moves one cell to the left and opens the cell editor
Tab moves one cell to the right and opens the cell editor
Tab+Shift moves one cell to the left and opens the cell editor
F2 opens the cell editor
Space changes the state if the cell is a check box or a radio button
ESC closes the editor for a cell. Changes aren't saved
PGUP moves to the next page (if the paging mode is enabled and some cell is selected)
PGDN moves to the previous page (if the paging mode is enabled and some cell is selected)
Left, Right arrow keys if the editor for the current cell is closed, moves one cell to the left/right and opens the cell editor. If the editor for the current cell is opened - nothing happens
Up, Down arrow keys moves one cell up/down in the current column
Ctrl + Left, Right arrow keys if the editor for the current cell is closed, moves to the first/last cell in the row and opens the cell editor. If the editor for the current cell is opened - nothing happens
Ctrl + Up, Down arrow keys moves to the first/last cell in the current column
Ctrl + Shift + Up, Down arrow keys moves to the first/last cell in the current column
Ctrl + Home moves to the top left cell in the grid and opens the cell editor
Ctrl + End moves to the bottom right cell in the grid and opens the cell editor
Shift + Up, Down arrow keys moves one cell up/down in the current column and opens the cell editor
Home if the editor for the current cell is closed, moves to the first cell in the row and opens the cell editor. If the editor for the current cell is opened - nothing happens
End if the editor for the current cell is closed, moves to the last cell in the row and opens the cell editor. If the editor for the current cell is opened - nothing happens

Specifying the tab order of the columns

You can change the standard tab order by using the setTabOrder method.

Note, that as a parameter the method takes a list of numbers which dictates the order of the columns while tabbing and NOT a list of columns' indices. See details at the method's page.

Changing the tab order of columns

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.setTabOrder("4,3,2,1"); //the inverse tab order

Related sample:  Tab Order and Readonly Cells

Excluding not editable cells from the tab order list

To prevent not editable cells from receiving the focus, call the enableEditTabOnly method with the true parameter.

Preventing not editable cells from receiving the focus

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.enableEditTabOnly(true);

Related sample:  Tab Order and Readonly Cells

Setting controls for tab-in/tab-out the grid

To specify HTML controls that will precede/succeed the grid in the tab order, use the setExternalTabOrder method:

Specifying HTML controls for tab-in/tab-out the grid

<input type="text" id="input1" />*!*/
<div id="gridbox"></div>
<input type="text" id="input3" />*!*/
 
<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
    mygrid.init();
    mygrid.setExternalTabOrder("input1","input3"); </script>

In this case the tab order of your HTML page will look like this:
... input1, grid (first cell,..., last cell), input 3 ....

Related sample:  Tab Order and Readonly Cells

Mouse navigation

Besides keyboard navigation the library provides mouse navigation.

Mouse navigation lets you to:

  • move the row selection with mouse-over;
  • open the cell editor with a single click.

To activate mouse navigation, call the enableLightMouseNavigation method with the true parameter:

Activating mouse navigation in the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.enableLightMouseNavigation(true);

Related sample:  Light mouse navigation

Back to top