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

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

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 ....

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