HOW TO DISPLAY IMAGE BUTTON COLUMN IN KENDO GRID

Hi All,

Many of us struck with displaying IMAGE BUTTON in Kendo Grid Columns. Here is the solution,

We can use Client Template to display HTML elements in Kendo Grid columns.

 Use the following syntax this,

.ClientTemplate("<a href=\"javascript: YourJSFunction('#= Parameter#','this');\"><img style='border: 0;' src='../../Content/Images/ourImage.jpg' alt='Arrow' /></a><a href=\"javascript:ImageClickFunction('#= Parameter#');\" style='display: none;'><img style='border: 0;' src='../../Content/Images/Image2.jpg' alt='Arro' /></a>");

Example:

             .ClientTemplate("<a href=\"javascript: ShowDetails('#= EmpID#','this');\"><img style='border: 0;' src='../../Content/Images/ImaEmpID.jpg' alt='Arrow' /></a><a href=\"javascript:ImageClickFunction('#= EmpNane #');\" style='display: none;'><img style='border: 0;' src='../../Content/Images/ImageEMP2.jpg' alt='Arro' /></a>");

Note:

Here I am giving Data field with preceding its object name.