jqGrid - Navigate rows using up/down arrow keys?

Question

Is it possible to navigate between rows using the Up and Down arrow keys?

For example, if the first row in the grid is selected and the user presses 'down', I would like the grid to unselect that row and select the next row down in the grid.

There is a post in the jqGrid Forums about this at http://www.trirand.com/blog/?page_id=393/help/navigate-arraw-keys/, but enabling cell edit mode is not a solution for me as it will cause many other undesirable grid behaviors.

Answer 1

Keyboard navigation has finally been added to jqGrid as of version 4.0.

To get started, go to the Demo Page and navigate to Functionality | Keyboard navigation.

The following code is used to bind the up/down arrow keys:

jQuery("#keynav").jqGrid('bindKeys');

But as the demo shows, you can pass options to bind other keys as well:

// Bind the navigation and set the onEnter event
jQuery("#keynav").jqGrid('bindKeys', {
       "onEnter" : function( rowid ) { 
                     alert("You enter a row with id:"+rowid)
       }
});

For more information, please refer to the bindKeys method in the documentation wiki.

Answer 2

$(document).keypress(function(e) {

if(e.keyCode == 40) { //down arrow
 $('#nextElementId').click();
}
if(e.keyCode == 38 { //up arrow
 $('#previousElementId'.click();
}

});