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

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

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>"},

var grid=$（“#grid”）.kendoGrid({
列：[{command:{name:“edit”，title:“edit”，text:{edit:，cancel:，update:}，
headerTemplate:“新项目”}，

---

我的问题是：如何在“NewItemClick（）”中创建新行并将该行置于编辑模式

当您尝试在模板定义本身中绑定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>"

上述函数通过操作数据源在网格底部创建新行。然后将新行视为行“编辑”。创建新行的操作借用了OnaBai的答案

---

这是一个正在运行的，希望能有所帮助。

我想完成gisitgo的回答。如果您的数据源需要一些时间进行更新，在调用

页面（…）

时，网格刷新将取消编辑器的弹出窗口。通过将对editRow的调用绑定到

“更改”

事件，可以避免此情况：

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.one("change", function () {
    grid.editRow(grid.tbody.children().last());
  });
  dataSource.page(dataSource.totalPages());
}

---

注意：如果对网格进行排序，这种方法将产生问题，因为新行不一定在末尾

我发现，如果有多个页面，例如插入的行没有打开进行编辑，则可能会出现问题。 下面是一些基于复制行的当前索引的代码

我们还根据UID编辑行以提高准确性

function cloneRow(e) {
    var grid = $("#grid").data("kendoGrid");
    var row = grid.select();

    if (row && row.length == 1) {
        var data = grid.dataItem(row);

        var indexInArray = $.map(grid.dataSource._data, function (obj, index)
        {
            if (obj.uid == data.uid)
            {
                return index;
            }
        });

        var newRowDataItem = grid.dataSource.insert(indexInArray, {
            CustomerId: 0,
            CustomerName: null,                
            dirty: true
        });
        var newGridRow = grid.tbody.find("tr[data-uid='" + newRowDataItem.uid + "']");
        grid.select(newGridRow);
        grid.editRow(newGridRow);
        //grid.editRow($("table[role='grid'] tbody tr:eq(0)"));
    } else {
        alert("Please select a row");
    }
    return false;
}

---

你能发布完整的kendoGrid对象吗？很高兴它成功了！请点击复选标记接受这个答案，让其他人知道它是正确的答案。谢谢！正如我在回答中暗示的，你可以在你的JSFIDLE中看到，如果你按名字升序排序，它就不起作用了

function cloneRow(e) {
    var grid = $("#grid").data("kendoGrid");
    var row = grid.select();

    if (row && row.length == 1) {
        var data = grid.dataItem(row);

        var indexInArray = $.map(grid.dataSource._data, function (obj, index)
        {
            if (obj.uid == data.uid)
            {
                return index;
            }
        });

        var newRowDataItem = grid.dataSource.insert(indexInArray, {
            CustomerId: 0,
            CustomerName: null,                
            dirty: true
        });
        var newGridRow = grid.tbody.find("tr[data-uid='" + newRowDataItem.uid + "']");
        grid.select(newGridRow);
        grid.editRow(newGridRow);
        //grid.editRow($("table[role='grid'] tbody tr:eq(0)"));
    } else {
        alert("Please select a row");
    }
    return false;
}