If the user starts typing text, the cell’s content is replaced with the text entered from the user.
– Left Arrow key is pressed – Selects the left cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
– Right Arrow key is pressed – Selects the right cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
– Up Arrow key is pressed – Selects the cell above, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
– Down Arrow key is pressed – Selects the cell below, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
– Page Up/Down is pressed – Navigate Up or Down with one page, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor
. – Home/End is pressed – Navigate to the first or last row, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
– Enter key is pressed – Shows the selected cell’s editor. If the cell is in edit mode, hides the cell’s editor and saves the new value. The editor’s value is equal to the cell’s value.
– Esc key is pressed – Hides the cell’s editor and cancels the changes.
– Tab key is pressed – Selects the right cell. If the Grid is in edit mode, saves the edit cell’s value, closes its editor, selects the right cell and opens its editor.
– Shift+Tab keys are pressed – Selects the left cell. If the Grid is in edit mode, saves the edit cell’s value, closes its editor, selects the left cell and opens its editor.
– F2 key is pressed – shows the selected cell’s editor when the Grid is in edit mode.
– Space key is pressed – Toggles the checkbox editor’s check state when the selected cell’s column is a checkbox column and the Grid is editable.
– Ctrl key is pressed – in ‘multiplecellsextended and multiplerowsextended’ selection mode, extends the selection when the user clicks on a cell or row.
– Ctrl+ARROW KEY – moves to an edge.
– SHIFT+ARROW KEY extends the selection.
– Page Down – Moves one screen down
– Page Up – Moves one screen up
– Home – Moves to the beginning
– End – Moves to the end
With the release of jQWidgets 2.5, we added a new functionality which enables you to override or extend some of the built-in key combinations. You can also use the feature to make the Grid to handle additional keys or to disable a default behavior. That can be achieved by using the Grid’s “handlekeyboardnavigation” callback function which is called when the user presses a key when the widget is on focus.
The example code below demonstrates how to override the default action of the “Esc” and “Enter” keys.
var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, columnsresize: true, editable: true, ready: function() { $("#jqxgrid").jqxGrid('focus'); }, editmode: 'selectedcell', selectionmode: 'singlecell', handlekeyboardnavigation: function(event) { var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0; if (key == 13) { alert('Pressed Enter Key.'); return true; } else if (key == 27) { alert('Pressed Esc Key.'); return true; } }, columns: [ { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250}, { text: 'S&P 500', datafield: 'S&P 500', width: 200, cellsformat: 'f' }, { text: 'NASDAQ', datafield: 'NASDAQ', width: 200, cellsformat: 'f' } ] });