Question

我在html中有一个Kendo网格，如下所示：

<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

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

1 个答案: