Tab to new row - cell index not working

Hello,


I am implementing a tab keydown event feature similar to what was discussed in this forum thread: https://www.syncfusion.com/forums/170167/how-to-edit-next-row-when-tab-is-hit-on-the-last-column-of-the-previous-row


A notable difference is that I am using a grid in batch editing mode, rather than editing row by row. I have stepped through the code, and found that using this.grid.selectCell sets the cellIndex correctly, but the focused input field is off by 2 columns (indices). For example, tabbing from the last column of a row to the next row sets cellIndex = 1 for the first column, but the third input field (third column) is the cell that is focused.


I have provided two snippets below. Please advise.


public onKeydown(args: any) {
if (args.keyCode === 9 && this.grid.isEdit) {
let cellElement: any = parentsUntil(args.target, 'e-rowcell', false);
let visibleColumns: GridColumn[] = this.grid.getVisibleColumns();
let lastColumn: GridColumn = visibleColumns[visibleColumns.length - 1];

let rowEle:any = parentsUntil(args.target, 'e-row', false);
let rowInfo: any = this.grid.getRowInfo(rowEle);

if (cellElement.ariaLabel.includes(lastColumn.headerText)) {
this._tabPressed = true;
// this.grid.selectRow(rowInfo.rowIndex + 1);
let startCell = 0;
for(let i = 0; i < visibleColumns.length; i++) {
if (this.checkIsEditable({column: visibleColumns[i]})) {
startCell = i + 1;
break;
}
}

if (this.grid.getRows().length - 1 > args.rowIndex)
this._preventSelection = true;

this.grid.selectCell({
rowIndex: rowInfo.rowIndex + 1,
cellIndex: startCell
});
}
}
}


onCellSelected(args: any) {
if (this._tabPressed && this._preventSelection) {
this._tabPressed = false;
this._preventSelection = false;
this.grid.startEdit(); // edit the selected row.
}
}



1 Reply

RR Rajapandi Ravi Syncfusion Team June 16, 2022 02:12 PM UTC

Hi Pete,


Greetings from Syncfusion support


We have checked your shared information and we suspect that you like to traverse the Grid cell editing by pressing tab key and like to travers to the next row by excluding primarykey column. In your query you said that while traversing to the next row it will focusing the 3rd column. Before we start providing solution on your query, we need some information for our clarification. So please share the below details that will be helpful for us to provide better solution.


1)         Please share your code example of Grid column definition we would like to check what type of columns you are maintaining in your Grid.


2)         Share the issue scenario in video demonstration format that would be helpful for us to validate.


Regards,

Rajapandi R


Loader.
Up arrow icon