Kendo grid hide delete button

Question

I want to hide delete button in some rows with certain conditions. I have checked the following link but it is still not working well.

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

Their code like this:

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

The problem is when you changed any items in the popup edit window, the delete button will show up on the original gray out area. Although you click the cancel button, it will disappear. But if you click the right up corner [x] to close the popup edit window, the delete button will stay there.

Any body know there is any new update for the kendo grid conditional button?

Thanks

Answer 1

First add an event in the grid as

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

And then on js

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

It will work.

Answer 2

You can achieve this requirement by using onDataBinding event of KendoGrid.

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"
                            }
                        ]
                    });
                });

Check this link http://jsfiddle.net/HuTpj/68/ and see the console for events trigger while loading the grid.