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);

score 14 · Accepted Answer · answered Nov 14 '12 at 14:24

14

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

answered Nov 14 '12 at 14:24

Vlad Bezden

83,883
25
248
179

Yeah um this provides me with the markup defined above but clicking on it does nothing. – The Muffin Man Sep 04 '13 at 22:37
2

Note that you have to add the .Editable() onto the grid for the event to be attached to a "k-grid-delete" item – Steven M Apr 09 '14 at 20:53
`@(Html.Kendo().Grid() ... .Editable(editable => editable.Mode(GridEditMode.InCell))` There are 2 types of GridEditModes. My link includes a span for the icon: `Delete` – Jeremy Ray Brown Oct 20 '16 at 13:56

score 13 · Answer 2 · edited Jun 28 '13 at 14:41

13

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>

edited Jun 28 '13 at 14:41

Ry-

218,210
55
464
476

answered Nov 13 '12 at 22:15

Petur Subev

19,983
3
52
68

1

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("My delete !") .Title("Action") .Width(100); Please advise. – Vlad Bezden Nov 13 '12 at 22:46
1

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. – Petur Subev Nov 13 '12 at 23:18
1

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. – Vlad Bezden Nov 14 '12 at 01:59
1

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. – Petur Subev Nov 14 '12 at 07:26
1

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! – Vlad Bezden Nov 14 '12 at 14:22
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 ? – Pawan Feb 10 '14 at 06:09

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

2 Answers2