Kendo UI Grid: Custom Edit Button for Ajax Grid

While trying to display a list of data in a Kendo UI grid for which the data was loaded via Ajax, I wanted to have a custom command that loaded a new page to edit a row. In the specific case I was looking at, I didn’t want to edit inline or edit the row data in a popup dialog – I wanted to leave the page showing the grid and load a new HTML page to do the edit.

The project I was working on used ASP.NET MVC and the handy Kendo UI MVC wrappers. The key to loading a new page was inserting a clickable link that could call a controller action and pass in the ID of the row to edit. To keep things consistent, I also wanted my link to look like a normal Kendo UI grid edit button.

While I could find examples of how to include custom links when a Kendo Grid was server bound, finding out how to do the same things for an Ajax bound grid was more difficult. In the end I found that specifying a column template like this worked:

columns.Bound(invoice => invoice.ID)
          ("<span class='k-icon k-edit'></span>Edit",
           new { ID = "#=ID#" },
           new { @class = "k-button k-button-icontext" }).ToHtmlString());

Note that the first argument to the Html.ActionLink call is usually used to give the text of the link but I also included a span in order to add the correct Kendo CSS classes to make the link look like a button with an edit icon.

The result of the above client template for a column in a Kendo grid is that an edit button like the following is displayed:


and when the button is pressed, the following controller action is called:


assuming that the controller for the grid is the Invoices controller and that the row ID (or primary key of the record for the row) is 3.

2 thoughts on “Kendo UI Grid: Custom Edit Button for Ajax Grid

  1. Loften Pierce

    Hey man! That was great! just what I needed. BTW, have to encountered an issue with have kendo UI Menu on a grid column? Here’s a snippet: It will not open the menu. Any thoughts?
    Html.Kendo().Menu().Orientation(MenuOrientation.Horizontal).Name(“themenu”).Items(menu => menu.Add().Text(“Menu”).Items(sub =>
    sub.Add().Text(“Edit this Employee”)
    .Url(Url.Action(“EditEmployee”, “Employee”, new { EmployeeID = “” }));
    sub.Add().Text(“Activate/Deactivate this Employee”)
    .Url(Url.Action(“DeactivateEmployee”, “Employee”, new { UserID = “” }))
    .HtmlAttributes(new { onclick = “return confirm(‘Are you sure you want to Activate/De-activate this employee?’)” });
    .HtmlAttributes(new { style = “overflow:visible;” })

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>