Destroy Command Conditianally

[Edwin]

Hi,

 I am bind the kendo grid @ Client side. Any idea of how to show the destroy delete command based on other column status? Appreciate your help on this.

 

Thanks,

Edwin

[Dimiter Madjarov]

Hello Edwin,

Since the current Grid is bound via Ajax, you could use the dataBound event handler to achieve the task.

.Events(e => e.DataBound("dataBound"))

function dataBound(e) {
    var grid = this;
    grid.tbody.find("tr[role='row']").each(function (e) {
        var model = grid.dataItem(this);

        if (model.UnitPrice > 20) {
            $(this).find(".k-grid-delete").remove();
        }
    });
}

The current example removes the destroy command for items with UnitPrice over 20.

Regards,
Dimiter Madjarov
Telerik

[Edwin]

Thanks Dimiter Madjarov. It works. Now below is the issue I am facing. I am trying to replace the destroy Delete text with the Delete Image.

Issue 1: When I click on the Delete icon is not firing the editable confirmation function but if I remove the template column the editable confirmation function is working.

Issue 2: After replacing the image the above databound function which you have mentioned is not working. I assume that this is because of the template column. Any idea of how to resolve this or is there any other way to implement this?

Sample Code:

command: [{ name: "destroy", template: "<img src='../Images/delete.png' title='Delete' style='cursor: pointer;height:13px;width:13px;'/>"}], title: " ", width: 70

Editable Confirmation Function:

editable: {
confirmation: function (e) {
if (e.DeleteAction == 'y')
return "Are you sure that you want to delete record for " + e.Name + "?";
}
}

Databound event:

var grid = this;
grid.tbody.find("tr[role='row']").each(function (e) {
var model = grid.dataItem(this);

if (model.DeleteAction != 'y') {
$(this).find(".k-grid-delete").remove();
}
});

 

Appreciate your help on this.

 

Thanks,

Edwin

[Dimiter Madjarov]

Hello Edwin,

The sample code provided in the previous post looks for the built in destroy command button via it's k-grid-delete class. Regarding the sample code from the last post, setting a template for a command is not supported. If custom delete button/image should be used, you could add a template column instead and invoke the removeRow method on click of this image. In order to preserve the initial conditional hiding logic you could add your own CSS class to the images and use it in the sample code from the first post.

Regards,
Dimiter Madjarov
Telerik

[Edwin]

Thanks Dimiter Madjarov.