beforeCellKeyDown rowIndx issue

[pranit@srcomsec]

When pressing the up/down arrow key, we get the wrong row index.

For example, my row selection in row #5 (zero-based row index so rowIndex = 6) & when pressing ArrowUp OR ArrowDown then getting ui.rowIndx as 4. It should be 4 for the up arrow and 6 for the down arrow.

Please review the sample code below & advise.

Code: [Select]

beforeCellKeyDown: function (event, ui)
{
console.log(event.key + " === " + ui.rowIndx);
}

Output from the above code:

Code: [Select]

ArrowUp === 4
ArrowDown === 4


[paramvir]

The ui.rowIndx value you are getting in the event is correct, it's 4 ( zero based ) for row #5.

ui.rowIndx is the rowIndx of the row in which key is pressed so it remains the same whether up or down is pressed.

[pranit@srcomsec]

Thank you for your quick response.

We are trying to select rows via the up/down arrow key as per the sample code below but getting issues selecting rows even add row selection method is called but the row is not selected in grid.

The steps below are to get this issue.
1) Click on any row via mouse & click Shift + Up/Down keyboard then working fine
2) Lift the shift key and up/down the keyboard key
3) Now try with shift + Up/Down keyboard again & getting this issue. As per the console log, the event is fired to add selection but the row is not selected in the grid.

Please advise.

Code: [Select]

beforeCellKeyDown: function (event, ui)
{
console.log(event.key + " === " + ui.rowIndx);                         
if (event.shiftKey && event.key == "ArrowDown") {
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx + 1 >= this.getData().length) {
return;
}

var liRowIndex = ui.rowIndx + 1;
var isSelected = sr.isSelected({ rowIndx: liRowIndex });
if (isSelected) {
sr.remove({ rowIndx: liRowIndex });
console.log("Row removed: Shift + ArrowDown" + liRowIndex);
}
else
{   
sr.add({ rowIndx: liRowIndex });
console.log("Row Added: Shift + ArrowDown" + liRowIndex);
}
}
else if (event.key == "ArrowDown") {
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx + 1 >= this.getData().length) {
return;
}
sr.removeAll();
sr.add({ rowIndx: ui.rowIndx + 1 });
}
else if (event.shiftKey && event.key == "ArrowUp") {
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx == 0) {
return;
}

var isSelected = sr.isSelected({ rowIndx: ui.rowIndx - 1 });
if (isSelected) {
sr.remove({ rowIndx: ui.rowIndx - 1 });
console.log("Row removed: Shift + ArrowUp ");
}
else {
sr.add({ rowIndx: ui.rowIndx - 1 });
console.log("Row Added: Shift + ArrowUp ");
}
}
else if (event.key == "ArrowUp") {
var sr = this.SelectRow();
var currentIndx = ui.rowIndx;
if (currentIndx == 0) {
return;
}
//if (!event.ctrlKey)

sr.removeAll();
sr.add({ rowIndx: ui.rowIndx - 1 });
console.log("ArrowUp Row added: ");
}
}


[paramvir]

I'm not quite sure about your requirement but looking at your code, you need to return false to prevent default action by the grid otherwise your method calls and grid default key navigation would run together and you would get unexpected results.

[pranit@srcomsec]

We just added return false in "event.shiftKey && event.key == "ArrowDown"" condition & all working fine.

Thanks

[pranit@srcomsec]

Now, we are having an issue with the row selection after applying the filter as the row index is not changed. Please refer to the screenshot attached.

Looks like we need the next row index which is visible on the grid after applying the filter.

As you see in the attached screenshot, the row index is 9 & then directly 53 which has caused row selection as per my main code.

Please advise.

[paramvir]

set filterModel.hideRows to false

or you have to take into account hidden rows while implementing custom key navigation, these methods can help you get next / previous visible row indices.

https://paramquery.com/pro/api#method-getNextVisibleRIP
https://paramquery.com/pro/api#method-getPrevVisibleRIP

[pranit@srcomsec]

Thank you. It is working.

Sorry, one more query, I need to prevent deselection if the row is already selected and the user clicks on the same row.  The deselection needs to be worked when the user clicks on another row.

I am trying with "toggle: false" in selectionModel but it is not working. Please advise.

Code: [Select]

selectionModel: { type: 'row', mode: 'block', column: false, row: true, toggle: false },


[pranit@srcomsec]

Please advise on this?

[paramvir]

I would look into the selectionModel.toggle option not working.

Meanwhile you can also implement this functionality by use of beforeCellClick event.

Code: [Select]

beforeCellClick: function(evt, ui){
if( !evt.ctrlKey && this.SelectRow().isSelected(ui)){
   return false;
}
},