Kendo Grid Cell Not Entering Edit Mode When Tabbing To Grid From An Input Field

Question

We are using Kendo grid for a header/detail accounting application with a data-entry form and an editable grid. When tabbing off of the form to the grid the first cell will not go into edit mode except with some workaround 'hack' code in the 'navigate' event (see below). The problem is the grid edit mode literally works differently when tabbing to the first cell of the grid from a form input field vs. clicking in the same cell. Clicking (rather than tabbing) into the first cell does put the cell into edit mode, but clears the field contents.

The desired behaviour it that a user can tab to the first cell of the grid or click in it to edit the cell.

Here's a screen shot of the grid with the first cell focused, but not in edit mode (without the workaround 'hack' code):

Here's the grid code:

let grid = $("#" + target).kendoGrid({
    dataSource: {
        data: rows,
        schema: {
            model: {
                fields: columnSetup.modelFields
            }
        }
    },
    edit: function (e) {
        // This does not fire when tabbing to the grid. It will fire if a cell is clicked.
    },
    editable: {
        mode: "incell",
        createAt: 'bottom'
    },
    navigatable: true,
    navigate: function (e) {

        // Attempted Workaround - This does put the first cell in edit mode, but only when tabbing
        // to the grid. However, clicking in the first cell does put the cell in edit mode, but
        // clears the field value.
        if (e.sender['_rowVirtualIndex'] == 0 && e.element[0]['cellIndex'] == 0 && typeof (e.sender['_editContainer']) != 'object') {
            this.editCell(e.element[0])
        }
    },
    resizable: true,
    reorderable: true,
    scrollable: { virtual: true },
    selectable: "row",
    columns: columnSetup.columns,
    dataBound: keyboardEventHandler,

}).data('kendoGrid');

It seems that someone has had the same question for Telerik (albeit 3 years ago). Perhaps moving the inputs above the grid into the grid itself (via a toolbar template) may give you some success? — Sandman
That post does answer the question of why fields do not get focus when tabbing into the grid. So, the remaining question would be why using editCell in the navigate event works differently when tabbing vs. clicking. — A2MetalCore

A2MetalCore A2MetalCore · Accepted Answer · 2017-05-10T18:00:16

To navigate to the grid by clicking as well as tabbing and then immediately enter edit mode, use the kendoHelpers 'refreshAndKeepEditing' function in the 'navigate' event on the grid:

navigate: function (e) {
    if (e.sender['_rowVirtualIndex'] == 0 && e.element[0]['cellIndex'] == 0 && typeof (e.sender['_editContainer']) != 'object') {

        this.editCell(e.element[0]);
        kendoHelpers.grid.refreshAndKeepEditing(grid, true);
    }
},

Kendo Grid Cell Not Entering Edit Mode When Tabbing To Grid From An Input Field

1 Answers