jqGrid - Navigate rows using up/down arrow keys?

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.

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.

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

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

});

This will only work if you have one grid on the screen because it overrides the document level up/down keys but it is a start.

        $(document).keypress(function(e)
        {
            if(e.keyCode == 38 || e.keyCode == 40)  //up/down arrow override
            {
                var gridArr = $('#GridID').getDataIDs();
                var selrow = $('#GridID').getGridParam("selrow");
                var curr_index = 0;
                for(var i = 0; i < gridArr.length; i++)
                {
                    if(gridArr[i]==selrow)
                        curr_index = i;
                }

                if(e.keyCode == 38) //up
                {
                    if((curr_index-1)>=0)
                        $('#GridID').resetSelection().setSelection(gridArr[curr_index-1],true);
                }
                if(e.keyCode == 40) //down
                {
                    if((curr_index+1)<gridArr.length)
                        $('#GridID').resetSelection().setSelection(gridArr[curr_index+1],true);
                }
            }

        });

To do this use

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

However, this will not work if the grid has a .disableSelection() attached to it. jquery disable selection stops the selection of text content within an object, so if this is applied to a grid, the user can't select text within a grid and copy it to the clipboard.