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.

Extinction

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.

Extinction

I would like to know a follow up question, i tried to select the first row on grid completion, but it does not immediately allow keyboard navigation. – Raw

@Raw - The grid needs to have focus before keyboard navigation will work. – Extinction

Answer 2

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

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

});

Beauharnais

Hmmm... This is a good start, but this code assumes there is only a single grid on the page, and that I can easily get the ID's for each row in the order they are displayed. – Extinction

I used the ID as a simplification. The selected 'tr' has the class ui-state-highlight, using this you can get the next or previous row. You may bind the keypress event to the table instead of 'document', this way you shouldn't have problem with more than one grid. – Beauharnais

Obviously people shouldn't just be copying and pasting code. This answer shows you the concept behind handling a keypress and is perfectly valid. Almost every answer on SO is a good start! – Premolar

Answer 3

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

        });

Tempi

Answer 4

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.

Wargo