Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
605
When a cell that is not editable has the focus, tabbing is disabled
posted

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.

Parents
  • 605
    Verified Answer
    Offline posted

    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();

Reply Children