为啥 Kendo Grid 内联不可编辑？

Posted 2023-05-07

【中文标题】为啥 Kendo Grid 内联不可编辑？

【英文标题】：Why isnt the Kendo Grid inline editable?为什么 Kendo Grid 内联不可编辑？

【发布时间】：2020-09-02 06:38:42

【问题描述】：

我在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"

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

【参考方案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

【讨论】：

这不会使行可编辑，除非他们单击编辑按钮。单击单元格后如何使其可编辑？

示例项目通过单击按钮添加新行。我想在用户从网格中的最后一个可编辑单元格中跳出标签后添加一个新行。如果未填充单元格并且它们是 tab ，则不会创建新行。