ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: francisco.cesar on March 28, 2018, 09:53:01 pm

Title: Select row using the keyboard
Post by: francisco.cesar on March 28, 2018, 09:53:01 pm

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?

Title: Re: Select row using the keyboard
Post by: paramvir on March 29, 2018, 12:15:07 am

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


Title: Re: Select row using the keyboard
Post by: francisco.cesar on March 29, 2018, 02:25:23 am

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!