Kendo Grid Tips: Navigate Kendo Grid CellsUsing Tab Key Based on Row and Column

Some time we have requirements to move user to pre determine cells in the kendo grid based on conditions. As example there were kendo grid after user save data it disable correct cells and enable cells which have errors. User has requirement to move only error cells using tab key.

For such kind of requirements can use following code snippets to navigate user.

  $(document).ready(function () {
        $("#Grid").on("keyup", 'tr', function (event) {
            navigateColorGrid(event);

        });     
    });

function navigateColorGrid(e) {

    if (e.keyCode == 9) {

        event.stopPropagation();

        event.stopImmediatePropagation();

        event.preventDefault(); //Prevent default tab key function

        var eCell = $(e.target).closest('td');
        var currentIndex = eCell.index();
        var currentIndexRow = $(e.target).closest('tr').index();
        var dataGrid = $('#Grid').data().kendoGrid;
        var currentRow = $(e.target).closest('tr');
        eCell = $(currentRow).find('td:eq(' + currentIndex + ')');

        if (invalidCells.length > 0) {
            tabToNextCell(currentIndexRow, currentIndex);
        } else {
            setTimeout(function () {
                var grid = $("#Grid").data("kendoGrid");
                if (eCell != null) {
                    grid.editCell(eCell);
                    var inputText = eCell.find("input").length;
                    var cPosition = inputText - 1;
                }

            }, 10);

        }

    }

}

function tabToNextCell(currentIndexRow, currentIndex) {

    var eCell = $("#Grid").children().find("tbody").find("tr:eq(" + currentIndexRow + ")").find("td:eq(" + currentIndex + ")");
    var cellLocation = getNextinvalidCell(currentIndexRow, currentIndex);

    if (cellLocation.length > 0) {
        var rowNumber = cellLocation[0].rowIndex;
        var cellNumber = cellLocation[0].cellIndex;

        eCell = $("#Grid").children().find("tbody").find("tr:eq(" + rowNumber + ")").find("td:eq(" + cellNumber + ")");
    }

    setTimeout(function () {
        var grid = $("#Grid").data("kendoGrid");
        if (eCell != null) {
            grid.editCell(eCell);
            eCell.select();
        }

    }, 10);

}

Following function used array called “InvalidCells”, when updating cells with results save invalid cells in array use that array to determine nearest invalid cell in the grid.

function getNextinvalidCell(currentIndexRow, currentIndex) {

    //Current row contains another invalid cell

    var cellLocation = [];

    var invalidCell = $.grep(invalidCells, function (cell) {

        return cell.rowIndex == currentIndexRow && cell.cellIndex > currentIndex;

    });

    if (invalidCell.length > 0) {

        var sortedInvalidCells = invalidCell.sort(function (a, b) {

            return a.cellIndex - b.cellIndex;

        });
        cellLocation.push({ rowIndex: sortedInvalidCells[0].rowIndex, cellIndex: sortedInvalidCells[0].cellIndex })
    }

return cellLocation;

}