Home > .Net, Technical > Kendo UI Grid: Custom Edit Button for Ajax Grid

Kendo UI Grid: Custom Edit Button for Ajax Grid

September 21st, 2013

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)
   .ClientTemplate
      (@Html.ActionLink
          ("<span class='k-icon k-edit'></span>Edit",
           "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:

kendo-ui-edit-button

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

/Invoices/Edit/3

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.

  1. Loften Pierce
    August 10th, 2015 at 15:50 | #1

    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?
    columns.Template(@).ClientTemplate(
    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?’)” });
    })).Orientation(MenuOrientation.Vertical)
    .HighlightPath(true)
    .OpenOnClick(false)
    .ToClientTemplate()
    .ToHtmlString())
    .HtmlAttributes(new { style = “overflow:visible;” })
    .Width(100);

  2. admin
    August 21st, 2015 at 11:16 | #2

    Hi Loften
    I did struggle to get a dropdown menu working as I couldn’t find an example of quite what I wanted to do at the time I was implementing the code. After some trial and error I got a bootstrap dropdown menu working in a Kendo grid using code. I’ve got an example in this blog post:

    http://www.sliqtools.co.uk/blog/technical/example-of-bootstrap-dropdown-menu-in-kendo-grid/

  1. No trackbacks yet.