Question

我无法弄清楚如何在Kendo网格中实现删除按钮。

如果我正确地阅读文档，这就是我应该做的：

vm.masterGrid.dataSource = new kendo.data.DataSource({
    transport:{
        destroy: function(e) {
            console.log(e);
            vm.removePackages(e.data);
        },
    }
});

vm.masterGrid.gridOptions = {
    columns: [
        { command: "destroy", title: "Remove" },
    ],

它从未到达console.log

以下是destroy命令的示例：

http://demos.telerik.com/kendo-ui/grid/editing （1/3向下编辑此示例]由于某种原因无法直接链接到代码）

我可以完全删除传输，它根本没有效果;无论如何都会发生删除。

destroy: {
    url: crudServiceBaseUrl + "/Products/Destroy",
    dataType: "jsonp"
},

所以我猜它是通过魔法发生的。魔法我无法在我自己的代码中重现。

Answer 1

首先，在您链接的演示中，如果删除transport.destroy配置，单击“删除”按钮时仍将从网格中删除该行。在保存更改之前，不会调用transport.destroy。单击“保存更改”然后刷新页面/网格时，您会发现该行未在后端删除。如果您将destroy配置保留在原位，那么该行将在页面刷新时消失。

其次，根据您如何设置未显示的其他传输配置（读取，更新，创建），这些记录的功能可能是问题（http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.destroy）

必须以相同的方式定义所有传输操作（读取，更新，创建，销毁），例如作为函数或对象。无法混合使用不同的配置选项。

我猜你有一些传输作为对象（可能是读取），当destroy是一个函数时，它可能只是默默地失败...必须单步执行kendo代码才能确定。< / p>

Answer 2

如果您想编写自己的删除代码，只需在网格代码中添加此行。

 $("#grid").kendoGrid({
                        dataSource: dataSource,
                        navigatable: true,
                        pageable: true,
                        height: 550,
                        remove: function(e){
                            debugger;
                            console.log("Debugger Hits :)");
                        },
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120 },
                            { command: "destroy", title: "&nbsp;", width: 150 }],
                        editable: true
                    });

只需修改上面给出的链接并更改为：

$("#grid").kendoGrid({
                        dataSource: dataSource,
                        navigatable: true,
                        pageable: true,
                        height: 550,                        
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120 },
                            { title: "&nbsp;", template: "<button onClick='customEditor()'>Custom Delete Button</button>", width: 150 }],
                        editable: true
                    });
                });

              function customEditor(){
               debugger;
                console.log("Yes, I Am Custom Delete Button");
              }

或者，不使用Kendo的默认删除按钮，为什么不使用自己的删除按钮？

{{1}}

希望它适合你。

Kendo Grid命令按钮

2 个答案: