This is a migrated thread and some comments may be shown as answers.

Destroy Command Conditianally

4 Answers 418 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Edwin
Top achievements
Rank 1
Edwin asked on 09 Jun 2015, 07:26 PM

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

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 10 Jun 2015, 08:35 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Edwin
Top achievements
Rank 1
answered on 10 Jun 2015, 01:44 PM

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

0
Dimiter Madjarov
Telerik team
answered on 11 Jun 2015, 08:33 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Edwin
Top achievements
Rank 1
answered on 11 Jun 2015, 01:16 PM
Thanks Dimiter Madjarov.
Tags
Grid
Asked by
Edwin
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Edwin
Top achievements
Rank 1
Share this question
or