Customizing Grid of Kendo UI

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

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?

Answer 2

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.