How to display icon as a value on a Kendo Grid cell? - asp.net-mvc

Question

I have a table called Priority and it has a column called IconUrl that is used to store the path of the icons as shown below:
| ID | Priority | IconUrl
------------------------------------------------------------|
| 0 | Normal | /../../Content/icons/normal.png |
| 1 | Urgent | /../../Content/icons/urgent.png |
| 2 | Blocker | /../../Content/icons/blocker.png |
I want to display icons according to the IconUrl values for each records on the Kendo Grid. I tried some methods as shown below, but none of them was solved the problem yet. How to manage to display just icon images?
columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("~/") + "#=IconUrl#' height='62' width='62'/>");
or
columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("#=Model.IconUrl#") + "'/>'");

Answer 1

The problem could be caused by the '/../../' at the start of your url.
Open your browsers developer tools, look at the cell can see what url is there.
If your content folder is in your home or project directory then recreating the url with the text from Priority col might work.
columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("~/Content/icons/") + "#=Priority.toLowerCase()#.png' height='62' width='62'/>");
The Url.Content function is used to map virtual paths. For example having apps inside other apps. If there is not a tilde at the start of the string passed to the function it will just return the url string unchanged.
So in your second example calling "<img src='" +Url.Content("#=IconUrl#") + "'/>'" will produce the same result as <a src='#=IconUrl#'>

Answer 2

As mentioned on Grid / Basic usage on Telerik page, you can display the image as shown below:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.PriorityDescription)
.ClientTemplate(#"<div class='grid-icon' style='background-image:
url(#:data.IconUrl#);'></div>").Width("40px");
columns.Bound(c => c.ContactTitle).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country).Width(110);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Grid"))
)
)
<style>
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>