为什么 Kendo Grid 内联不可编辑？

Question

我在html中有一个剑道网格如下：

<div 
     kendo-grid="grid"
     k-options="gridOptions"
     k-data-source="gridData"
     k-selectable="true"
     k-columns="gridColumns"
     k-editable="editableOptions">
</div>

Angular 后端是：

    $scope.gridData = new kendo.data.DataSource({
        data: $scope.users, <-- the data binds correctly in the grid
        editable: {
            createAt: "bottom"
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { type: "string", visible: true },
                    Name: { type: "string", editable: true }
                }
            }
        },
        sort: [
            { field: "Name", dir: "asc" }
        ],
        pageSize: 15,
        editable: true
    });

    $scope.gridOptions = {

    };

    $scope.gridColumns = [
        { field: 'Name', title: 'First Name', width: 60 },
        { field: 'Id', title: ' ',  width: 120 },
        {
            command: ["destroy"],
            title: " ",
            width: "175px",
            editable: "inline"
        }

    ];
    $scope.editableOptions = "inline";

所以用户数据正确加载了 5 行，但底部应该有一个额外的行用于通过该行添加新用户

editable: {
    createAt: "bottom"
},

但这不是在加载网格时创建的。

另外，他们应该可以通过以下命令删除

{
    command: ["destroy"],
    title: " ",
    width: "175px",
    editable: "inline"
}

但这也没有显示。 我在这里错过了什么？

Answer 1

在点击编辑按钮时使该行可编辑：

定义一次editable，像这样：

editable: {
    mode: "inline" , 
    createAt: "bottom"
},

你的command：

{
  command: ["edit","destroy"]
}

并添加toolbar 进行创建：

toolbar: ["create"]

这是一个示例：Sample Dojo

---

点击单元格后使其可编辑：

可编辑：

editable: {
    createAt: "bottom"
},

命令：

{
  command: ["destroy"]
}

工具栏：

toolbar: ["create", "save", "cancel"],

还有你的dataSource 设置batch: true

这是一个示例：Sample Dojo