如何以编程方式创建新行并将该行置于Kendo网格中的编辑模式

Question

在我的Kendo网格中,我试图将"创建新项目"按钮放在命令列的标题(标题)而不是工具栏中.这是我的网格定义的一部分:

var grid = $("#grid").kendoGrid({
columns: [{ command: { name: "edit", title: "Edit", text: { edit: "", cancel: "", update: "" } },
headerTemplate: "<a onclick ='NewItemClick()' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"},

我的问题是:如何创建一个新行并将该行置于'NewItemClick()'中的编辑模式

Answer 1

当您尝试在模板定义本身中绑定click事件时,存在一些麻烦的范围问题.

相反,更容易为链接分配ID,然后再绑定click事件.请注意,我已经给它id = create.

headerTemplate: "<a id='create' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"

然后在文档就绪,我绑定click事件:

$("#create").click(function () {
    var grid = $("#grid").data("kendoGrid");
    if (grid) {
        //this logic creates a new item in the datasource/datagrid
        var dataSource = grid.dataSource;
        var total = dataSource.data().length;
        dataSource.insert(total, {});
        dataSource.page(dataSource.totalPages());
        grid.editRow(grid.tbody.children().last());
    }
});

上面的函数通过操作数据源在网格底部创建一个新行.然后它将新行视为"编辑"行.创建一个新的行该行动从OnaBai的答案借这里.

这是一个工作的jsfiddle,希望它有所帮助.