Keymap - access
In your grid you are allowed to set the same navigation as in MS Access. In this access keymap the editor of selected cell should be opened every time cell is selected.
The access keymap provides the following keys for navigation:
- Enter / Tab- navigate to the next right cell, the editor of the cell opens
- Shift+Enter / Tag+shift - move to the previous cell, its editor is open
- Down-Arrow / Up-Arrow - move to the cell in the next / previous row, the editor of cell is open
- F2 - the editor of selected cell opens
- Space - enables snapshot of selected cell (checked/unchecked) if selected cell is checkbox
- Esc - closes the editor of selected cell
- PageUp / PageDown- moves to the previous/next page if paginal output is on. Selection of any cell in grid is required.
- Right Arrow / Left Arrow - navigate to the next right/left cell if cell editor is closed. If not keys are not active.
- Ctrl+Right Arrow / Ctrl+Left Arrow - navigate to the last/first cell in the row and opens its editor. If the editor of cell is open nothing will happen
- Ctrl+Up Arrow / Ctrl+Down Arrow - navigate to the first/last cell in the column (within one page in grid)
- Shift+Up Arrow Shift+Down Arrow - move to the cell up/down in the column and open cell editor
- Ctrl+Shift+Up Arrow / Ctrl+Shift+Down Arrow - navigate to the first/last cell in the column (withing current page) and opens cell editor
- Up Arrow - the same functionality as Shift+Up Arrow
- Down Arrow - the same functionality as Shift+Up Down
- Home = Ctrl+Left Arrow
- End = Ctrl+Right Arrow
- Ctrl+Home -move to the first cell of the first column in the page and open its editor
- Ctrl+End - move to the last cell of the last column in the page and open its editor
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
<title>Keymap - access</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<style>
div.gridbox_light table.obj tr.rowselected td.cellselected, div.gridbox table.obj td.cellselected {
background-color:#ACCADD;
}
</style>
<script>
var myGrid;
function doOnLoad(){
myGrid = new dhtmlXGridObject('gridbox');
myGrid.setImagePath("../../../codebase/imgs/");
myGrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
myGrid.setInitWidths("70,150,100,80,80,100");
myGrid.setColAlign("right,left,left,right,center,left");
myGrid.setColTypes("dyn,txt,ed,price,ch,co");
myGrid.enableMultiselect(true);
myGrid.enableAutoWidth(true);
myGrid.enableAutoHeight(true)
myGrid.init();
myGrid.enableAccessKeyMap(true);
myGrid.enablePaging(true,12,3,"pagingArea",true,"recinfoArea");
myGrid.load("../common/100.xml");
}
</script>
</head>
<body onload="doOnLoad()">
<h1>Keymap - access</h1>
<p>In your grid you are allowed to set the same navigation as in MS Access. In this access keymap the editor of selected cell should be opened every time cell is selected. </p>
<table width="600px">
<tr>
<td id="recinfoArea"></td>
</tr>
<tr>
<td>
<div id="gridbox" style="width:100%; height:450px; background-color:white;overflow:hidden"></div>
</td>
</tr>
<tr>
<td id="pagingArea"></td>
</tr>
</table>
<p> The access keymap provides the following keys for navigation:<br/>
<ul>
<li>Enter / Tab- navigate to the next right cell, the editor of the cell opens</li>
<li>Shift+Enter / Tag+shift - move to the previous cell, its editor is open</li>
<li>Down-Arrow / Up-Arrow - move to the cell in the next / previous row, the editor of cell is open</li>
<li>F2 - the editor of selected cell opens</li>
<li>Space - enables snapshot of selected cell (checked/unchecked) if selected cell is checkbox</li>
<li>Esc - closes the editor of selected cell</li>
<li>PageUp / PageDown- moves to the previous/next page if paginal output is on. Selection of any cell in grid is required.</li>
<li>Right Arrow / Left Arrow - navigate to the next right/left cell if cell editor is closed. If not keys are not active.</li>
<li>Ctrl+Right Arrow / Ctrl+Left Arrow - navigate to the last/first cell in the row and opens its editor. If the editor of cell is open nothing will happen </li>
<li>Ctrl+Up Arrow / Ctrl+Down Arrow - navigate to the first/last cell in the column (within one page in grid)</li>
<li>Shift+Up Arrow Shift+Down Arrow - move to the cell up/down in the column and open cell editor</li>
<li>Ctrl+Shift+Up Arrow / Ctrl+Shift+Down Arrow - navigate to the first/last cell in the column (withing current page) and opens cell editor</li>
<li>Up Arrow - the same functionality as Shift+Up Arrow</li>
<li>Down Arrow - the same functionality as Shift+Up Down</li>
<li>Home = Ctrl+Left Arrow</li>
<li>End = Ctrl+Right Arrow</li>
<li>Ctrl+Home -move to the first cell of the first column in the page and open its editor</li>
<li>Ctrl+End - move to the last cell of the last column in the page and open its editor </li>
</ul>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.