Customizing Grid of Kendo UI - asp.net-mvc

Question

By default grid of Kendo shows values of columns but I'd like to customize it. For example I want to show an icon for each value of one column.
I have a column in my grid that shows the status of activation or inactivation.Instead of showing "true" or "false", I want to show an icon that is proper for it.
I've used ".Template()" in grid but my code in ".Template" did not fire!
How can I solve this problem?
<div style="width: 100%;">
#(Html.Kendo().Grid<Jahan.Blog.Model.Article>()
.Name("ArticleAdmin").Navigatable()
.Resizable(c => c.Columns(true))
.HtmlAttributes(new { #class = "cursorLink", #style = "width: 1000px;height:auto;overflow: scroll;" })
.Columns(columns =>
{
columns.Bound(p => p.UserId).Width(100);
columns.Bound(p => p.Title).Width(200);
//columns.Bound(p => p.Summary).Width(140);
//columns.Bound(p => p.Description).Width(100);
columns.Bound(p => p.LikeCounter).Width(100);
columns.Bound(p => p.RateCounter).Width(100);
// Please attention to this
columns.Bound(p => p.IsActive).Template(p => #Html.ShowIcon(p.IsActive)).Width(80);
columns.Bound(p => p.IsActiveNewComment).Width(170);
columns.Bound(p => p.CreatedDate).Width(160).Format("{0:G}");
columns.Bound(p => p.ModifiedDate).Width(160).Format("{0:G}");
columns.Command(command => command.Destroy()).Width(170);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create("Editing_Create", "ArticleAdmin")
.Read("Editing_Read", "ArticleAdmin")
.Update("Editing_Update", "ArticleAdmin")
.Destroy("Editing_Destroy", "ArticleAdmin")
))
</div>
Please attention to this part of my code:
columns.Bound(p => p.IsActive).Template(p => #Html.ShowIcon(p.IsActive)).Width(80);
and
public static MvcHtmlString ShowIcon(this HtmlHelper html, bool isActive, string text = "", string activeCssClass = "glyphicon glyphicon-ok", string inactiveCssClass = "glyphicon glyphicon-remove")
{
StringBuilder result = new StringBuilder();
TagBuilder span = new TagBuilder("span");
span.SetInnerText(text);
if (isActive)
{
span.AddCssClass(activeCssClass);
}
else
{
span.AddCssClass(inactiveCssClass);
}
result.Append(span);
return MvcHtmlString.Create(result.ToString());
}

Answer 1

You can do this with a ClientTemplate as follows:
columns.Bound(p => p.IsActive)
.ClientTemplate("<img src='/Content/#= IsActive ? 'tick.png' : 'cross.png' #''>");
The above simply checks the IsActive property and displays a tick or cross image.

Answer 2

columns.Bound(p => p.IsActive).ClientTemplate("#= showIcon(IsActive) #").Width(80);
JavaScript function:
function showIcon(isActive) {
var result = "";
if (isActive == true) {
result = "<img src='/Content/tick.png'/>";
} else {
result = "<img src='/Content/cross.png'/>";
}
return result;
}
for more information click How do I use a JavaScript function in a column client template?