Tab to the next focusable or editable cell in a kendo grid

[Lee]

I have a kendo grid with several columns. The grid has in-cell editing enabled. I need the user to be able to press the tab key and ONLY tab between cells with focusable elements (such as a button) or editable cells. How would I accomplish this? 

Note: the solution here does not work when you have grouped or filtered rows. 

https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/skip-non-editable-cells-when-tabbing

[vicente]

How can you modify the custom tabbing logic to ensure that it properly handles scenarios where rows are grouped or filtered, allowing users to navigate only through visible and editable cells? What specific adjustments would you recommend to the getNextEditableCell function to accommodate these cases?

[vicente]

You need to listen for the keydown event on the grid. When the tab key is pressed, you can determine whether to allow the default tabbing behavior or to navigate to the next editable cell.  sports games

$(document).ready(function() {

    var grid = $("#grid").data("kendoGrid");

    // Handle keydown event
    $(grid.tbody).on("keydown", "td", function(e) {
        if (e.key === "Tab") {
            e.preventDefault(); // Prevent default tab behavior

            var currentCell = $(this);
            var nextCell = getNextEditableCell(currentCell, e.shiftKey);

            if (nextCell) {
                nextCell.focus(); // Focus the next editable cell
            }
        }
    });

    function getNextEditableCell(currentCell, isShift) {
        var cells = currentCell.closest("tr").find("td");
        var index = cells.index(currentCell);
        var nextIndex = isShift ? index - 1 : index + 1;

        // Loop through the cells to find the next editable cell
        while (nextIndex >= 0 && nextIndex < cells.length) {
            var nextCell = $(cells[nextIndex]);

            // Check if the cell is editable or contains a focusable element
            if (isCellEditable(nextCell)) {
                return nextCell;
            }

            nextIndex += isShift ? -1 : 1; // Move to the next cell
        }

        return null; // No editable cell found
    }

    function isCellEditable(cell) {
        // Check if the cell is in edit mode or contains a focusable element
        return cell.hasClass("k-edit-cell") || cell.find("button, input, select").length > 0;
    }
});

Ensure that your implementation maintains accessibility standards, allowing screen readers and other assistive technologies to function correctly.