If a cell has the focus and the cell is for a column that is marked as non-editable or the editCellStarting returns false for any reason, the keyboard navigation no longer works and the user is "stranded" on that cell.
I have reproduced the issue in this example by clicking on the unit price column and then trying to tab forward or backward.
The key here is that rowEditing be turned off
It is a very common scenario for us to use editCellStarting to disable a specific cell in a row even though the column is turned off. Our users rely heavily on keyboard navigation, so this is a critical issue for us.
We have had to override the standard navigation service's handleNavigation method to address some other issues in the grid (trying to navigate while in the details area, pressing enter in a textarea while editing a cell), so we have just extended this functionality to also support tabbing off of a cell that is not editable.
This support includes determining whether the column is not editable or the cell could not enter edit mode because of rules enforced in cellEditEnter.
In addition to setting focus on the next tab, we also call the method associated with onCellClick to ensure that this cell navigation is treated like tabbing from an editable cell.
Basically:
const activeNode = this.grid.navigation.activeNode; let newCellPosition: ICellPosition; if (event.shiftKey) { newCellPosition = this.grid.getPreviousCell(activeNode.row, activeNode.column); } else { newCellPosition = this.grid.getNextCell(activeNode.row, activeNode.column); } this.grid.navigateTo(newCellPosition.rowIndex, newCellPosition.visibleColumnIndex); const newCell = this.grid.getCellByColumnVisibleIndex(newCellPosition.rowIndex, newCellPosition.visibleColumnIndex); if (!newCell) { return; } newCell.activate(event); this.handleCellClick(newCell); event.preventDefault();
Hi Team,
We are trying to disable a particular cell based on the conditions and need the tab click navigate to the cell, that is next to disabled cell. We are trying the same as above but newCell.activate(event) is not working.
Could you please provide any samples available to achieve this.