How to create custom Delete/Destroy button/command in Kendo UI grid?

Question

I am using Kendo UI grid with GridEditMode.InCell and I need to add a hyperlink for delete/destroy command in the grid column instead of the default "Delete" button.

My current code looks like:

c.Command(command => command.Destroy()).Width(90);

Pearcy

Answer 1

Here is what I end up doing

          c.Template(@<text></text>)
              .Width(50)
              .ClientTemplate(@"<a class=""k-button-icontext k-grid-delete"" href=""\#"">Delete</a>");

Pearcy

Yeah um this provides me with the markup defined above but clicking on it does nothing. – Mickelson

Note that you have to add the .Editable() onto the grid for the event to be attached to a "k-grid-delete" item – Birthday

@(Html.Kendo().Grid<Your.Type>() ... .Editable(editable => editable.Mode(GridEditMode.InCell)) There are 2 types of GridEditModes. My link includes a span for the icon: <a class=""k-button k-button-icontext k-grid-delete"" href=""\#""><span class=""k-icon k-i-delete""></span>Delete</a> – Jornada

Answer 2

All you need to do is to add an element which has the k-grid-delete class.

For example you can add the following anchor element into a template column and it will start working as a delete button.

<a class="k-button k-button-icontext k-grid-delete" href="#">My delete !</a>

Assume

Thanks XMR for you response. However I don't understand where should I add that code. c.Command doesn't have template or ClientTemplate, so I can't add it there. I also tried: c.Bound(p => p.Id) .ClientTemplate("<a href='#' class='k-button k-button-icontext k-grid-delete'>My delete !</a>") .Title("Action") .Width(100); Please advise. – Pearcy

Indeed I suggested you to add it to the ClientTemplate. Isn't it displayed when you use the ClientTemplate? Or it does not work when you click the button. – Assume

Thanks again. ClientTemplate is not method of the Command. So when I apply it, code still compiles, but I am getting runtime error "CS1061: 'Kendo.Mvc.UI.Fluent.GridActionColumnBuilder' does not contain a definition for 'ClientTemplate' and no extension method 'ClientTemplate' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.GridActionColumnBuilder' could be found (are you missing a using directive or an assembly reference?)" Please advice. – Pearcy

I am not sure what you are trying to achieve. Yes the Command column does not have a Template/ClientTemplate method - the above should be used on a regular Template column. – Assume

You pointed me to a right direction +1, thanks a lot, but it was not exactly correct, you don't have to use k-button, since it still was creating the button. I am going to post my full answer on this. Thanks for your help! – Pearcy

Hi Petur,you are right we can add client template for that.But i want to know in case of adding client template to we can define datasource action method for destroy command ? I want to show custom delete confirmation message box for Destroy command.And for that if i use client template approach then how i can add the .Datasource method for it ? – Clackmannan