How to have an Image for a Command Button in the kendo Grid?

Introduction

While working with Kendo Grid in MVC, many times we come across a requirement when we want to have some images instead of default buttons of the grid.

I had a similar kind of requirement and as I was new to Kendo, it took me a lot of time to implement the same. After doing a lot of search and trying various methods for achieving the same, finally I got a perfect way to achieve this. I decided to write a post for this so that it can save time for others working with Kendo.

Below, I am going to explain how to add a delete image in my grid which will act as delete button of the grid.

Usually, we have a model class on which our kendo grid is based.

For example:

@(Html.Kendo().Grid<MyProject.Models.Mydata>()
                    .Name("Grid")
                    .Columns(columns =>
                        {
                           //columns of the grid here

                        })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("BindGrid", "MyController"))
                        )) 

So we can see in the above example MyData is the class my grid is based on.

In this MyData class, along with the other required properties, we can add an extra property and name it as Delete.

public class MyData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Delete { get; set; }
    }

Now, while defining columns in the grid, we can have one column for this Delete property too as we are going to have for Id and Name.

@(Html.Kendo().Grid<MyProject.Models.Mydata>()
   .Name("Grid")
   .Columns(columns =>
     {
       columns.Bound(p => p.Id);
       columns.Bound(p => p.Name);
       columns.Bound(p => p.Delete).ClientTemplate
       ("<img src='delete.png'onclick='deleteRow(this)' />");
     })

   .DataSource(dataSource => dataSource
   .Ajax()
   .Read(read => read.Action("BindGrid", "MyController"))  
 ))

As shown in the above code, for the Delete column, we have an image (delete.png).

This image will create an image button type of column in the grid.

We can have an onclick event for this image where we can implement the functionality we want for our custom button.

Hope it helps. :-)