Select row using the keyboard

[francisco.cesar]

I have a grid using the row selection model, defined as:

Code: [Select]

selectionModel: { type: 'row', mode: 'single' },

When the user clicks a row, the row is selected correctly. But when the user hits the arrow down key from the keyboard, the behaviour expected is: deselect the current selected row and select the next row, but instead the "cell cursor" moves to the next line without any kind of selection.

Is there a way to make the down/up keys select the next/previous row?

[paramvir]

Decoupling of keyboard navigation and row selections is by design.

You can make it behave as per your requirement by use of cellKeyDown event. Please add your checks for boundary conditions like rowIndx should not be less than 0 or more than total number of rows.

Code: [Select]

cellKeyDown: function(evt,ui){
var sr = this.SelectRow();
if( evt.keyCode==$.ui.keyCode.DOWN ){
sr.removeAll();
sr.add({rowIndx: ui.rowIndx+1});
}
else if( evt.keyCode==$.ui.keyCode.UP ){
sr.removeAll();
sr.add({rowIndx: ui.rowIndx-1});
}
},


[francisco.cesar]

Thank you very much, it worked!

I ended up with the following code:

Code: [Select]

                cellKeyDown: function(evt, ui) {
                    var sr = this.SelectRow();
                    var currentIndx = ui.rowIndx;
                    if (evt.keyCode == $.ui.keyCode.DOWN) {
                        if (currentIndx + 1 >= this.getData().length) {
                            return;
                        }
                        sr.removeAll();
                        sr.add({ rowIndx: ui.rowIndx + 1 });
                    } else if (evt.keyCode == $.ui.keyCode.UP) {
                        if (currentIndx == 0) {
                            return;
                        }
                        sr.removeAll();
                        sr.add({ rowIndx: ui.rowIndx - 1 });
                    }
                },

Regards and congratulations for this great grid!