剑道网格隐藏删除按钮

Question

我想在某些行中隐藏某些条件下的删除按钮。我已经检查了以下链接，但它仍然无法正常工作。

http://www.telerik.com/forums/hide-edit-and-delete-button-based-on-the-status-of-each-record

他们的代码是这样的：

function onEdit() {
  $(".k-grid-cancel").on("click", function () {
    setTimeout(function () {
        console.log("trigger");
        $("#Grid").data("kendoGrid").trigger("dataBound");
    });
  })
}

问题是当您在弹出编辑窗口中更改任何项目时，删除按钮将显示在原始灰色区域。虽然您单击取消按钮，但它会消失。但是，如果您单击右上角 [x] 关闭弹出式编辑窗口，删除按钮将保留在那里。

任何机构都知道剑道网格条件按钮有任何新的更新吗？

谢谢

Answer 1

首先在

网格中添加一个事件

.Events(ev => 
 {
       ev.Cancel("onEditCancel");
 })

然后在 js 上

function onEditCancel(e) {
    e.sender.cancelChanges();
    e.preventDefault();
}

它会起作用。

Answer 2

你可以通过使用 KendoGrid 的 onDataBinding 事件来实现此要求。

function onChange(arg) {
                    var selected = $.map(this.select(), function(item) {
                        return $(item).text();
                    });
                    console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
                }
                function onDataBound(arg) {
                  console.log(arg);
                    console.log("Grid data bound");
                }
                function onDataBinding(arg) {
                    console.log(arg);
                    console.log("Grid data binding");
                }
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: {
                                    url: "//demos.telerik.com/kendo-ui/service/Products",
                                    dataType: "jsonp"
                                }
                            },
                            pageSize: 20
                        },
                        height: 350,
                        change: onChange,
                        dataBound: onDataBound,
                        dataBinding: onDataBinding,
                        selectable: "multiple cell",
                        pageable: true,
                        sortable: true,
                        columns: [
                            {
                                field: "ProductName",
                                title: "Product Name"
                            },
                            {
                                field: "UnitPrice",
                                title: "Unit Price",
                                format: "{0:c}"
                            },
                            {
                                field: "UnitsInStock",
                                title: "Units In Stock"
                            }
                        ]
                    });
                });

http://jsfiddle.net/HuTpj/68/检查此链接，并查看控制台中加载网格时的事件触发器。