How To Add Row at Bottom of Kendo Grid Dynamically - kendo-grid

Question

We use Kendo Grid for heads down data entry in an accounting application. We need the grid to behave similar to QuickBooks. Specifically, users should be able to:
Tab between cells
Automatically advance to the next row when tabbing off the last cell in a row.
Automatically add a new row when tabbing off the last cell of the last row.
However, we're having difficulty achieving this behavior. The last cell on the last row does not get saved before adding a new row to the bottom of the grid. If, however, we add a bogus column as the last column the proper behavior is achieved, but you have to tab through an extra, needless column which is unacceptable. The user needs to be able to enter and tab with new rows being added automatically. Here's the code:
function createGrid() {
var grid: any = $("#" + target).kendoGrid({
dataSource: gridDs,
edit: gridCellEdit,
editable: {
createAt: 'bottom'
},
filterable: true,
sortable: true,
navigatable: true,
resizable: true,
reorderable: true,
scrollable: { virtual: true },
columns: gridColumns,
dataBound: monitorKeyboard
});
}
function gridCellEdit(e) {
var input = e.container.find("input");
input.focus(function (e) {
input.select();
});
input.focus();
}
function monitorKeyboard(e) {
var grid = $('#' + e.sender.wrapper[0].id).data("kendoGrid");
$(grid.tbody).on("keydown", "td", function (e) {
// Monitor tabbing through columns
if (e.keyCode == 9) {
var row: any = $(this).closest("tr");
var rowIndex: number = $("tr", grid.tbody).index(row);
var colIndex: number = $("td", row).index(this);
var count: number = grid.dataSource.total();
var lastColIndex = row[0].cells.length - 1;
if (rowIndex == count - 1 && colIndex == lastColIndex) {
e.stopImmediatePropagation();
e.preventDefault();
grid.addRow();
grid.saveRow();
}
}
});
}