剑道网格隐藏删除按钮

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/ 并查看控制台以在加载网格时触发事件。