Handle Keys in jqxGrid

jqxGrid has built-in keyboard navigation which is enabled by default. If you want to disable it, you can set the “keyboardnavigation” property to false. The list of the keys and key combinations handled by the widget is below:

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' }
]
});

About admin


This entry was posted in jQuery Widgets, jQWidgets, jqxGrid and tagged , , , , , , , . Bookmark the permalink.



Leave a Reply