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.
}
}