We have 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. Here's the 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 (hack) - 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');