How To Add Custom Keyboard Navigation Between Editable Cells In Kendo Grid

As a continuation of this Question and Answer: How do I implement a custom keypress handler for a Kendo Grid enabling the following: Arrow Keys navigate up and down rows The Cell

Solution 1:

I'll answer my own question with information found in the question in the Question, this question, the kendo.grid.js source, and my own experimentation. If anyone else has a better solution, I'll happily accept it instead.

// add a handler for the keydown event within the grid cells
$("#grid").kendoGrid().table.on("keydown", "td", function(e) {
    var grid = $("#grid").kendoGrid();

    if (e.keyCode == 38 || e.keyCode == 40) {
        var current = $(this);
        var row = current.closest("tr");
        var rowIndex = $("tr", grid.tbody).index(row);
        var colIndex = $("td", row).index(this);

        if (e.keyCode == 38) {//up
            rowIndex--;
        }

        if (e.keyCode == 40) {//down
            rowIndex++
        }

        //handle wraparound. Negative indexing already counts from the end, so only this case is needed
        if (rowIndex >= grid.dataSource.view().length) {
            rowIndex = 0;
        }

        var nextCellSelector = "#bid-items-grid tbody tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")";
        grid._handleEditing(current, $(nextCellSelector), current.closest("table"));

        // reusing the jQuery object doesn't work here because the grid redraws
        grid.editCell($(nextCellSelector));
    }
});

This starts out simply, you write a custom keydown event handler. You read the keys, you determine which cell you're in and which ones you need to move to, you handle the wraparound cases on the grid.

The first trick comes in the call to _handleEditing(). This is the internal function kendo grid uses to process the editing. It's signature is _handleEditing: function(current, next, table), taking the current cell, the next cell, and the table itself as inputs. Note: _ methods are internal methods: They are not designed to be used externally, and are not guaranteed to stay the same across updates. But I could find no official way of achieving this. Use with caution.

This looks like it will select the next cell for editing automatically, and if it does you can probably omit the call to grid.editCell(). However, in my experience _handleEditing() causes the grid to redraw, which causes the JQuery objects to become detached from the table cell elements.

This is why calling grid.editCell() needs an explicit selector using the row and column positions, rather than just saving the JQuery object in a variable.

Tab based navigation can be implemented in a similar way, and a handy kendo.keys.TAB definition can be compared to the keyCode for readability. Also, with Tab support you'll need to swallow up the browser's default tab behaviour of attempting to jump to the next input:

e.preventDefault();
e.stopPropagation();