如何动态添加Kendo Grid底部的行

Question

我们使用Kendo Grid来减少会计应用程序中的数据输入。我们需要网格的行为类似于QuickBooks。具体来说，用户应该能够：

1. 单元格之间的标签
2. 在连续删除最后一个单元格时自动前进到下一行。
3. 在标记最后一行的最后一个单元格时自动添加新行。

但是，我们很难实现这种行为。在将新行添加到网格底部之前，不会保存最后一行的最后一个单元格。但是，如果我们添加一个伪列作为最后一列，则可以实现正确的行为，但是您必须通过一个额外的，不必要的列来标记这是不可接受的。用户需要能够输入并自动添加新行。这是代码：

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();

        }
    }
});

}