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

Question

在我的剑道网格中，我试图将“创建新项目”按钮放在命令列的标题(标题)而不是工具栏。这是我的网格定义的一部分:

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

当您尝试在模板定义本身中绑定(bind) click 事件时，会出现一些麻烦的范围问题。

相反，更容易为链接分配一个 ID，然后再绑定(bind) 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>"

然后在文档准备好时，我绑定(bind)点击事件:

$("#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 的回答 here .

这是一个工作 jsfiddle ， 希望能帮助到你。