title: Customizing Grid of Kendo UI
body: <p>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?</p>
  
  <pre><code>&lt;div style="width: 100%;"&gt;
      @(Html.Kendo().Grid&lt;Jahan.Blog.Model.Article&gt;()
            .Name("ArticleAdmin").Navigatable()
            .Resizable(c =&gt; c.Columns(true))
            .HtmlAttributes(new { @class = "cursorLink", @style = "width: 1000px;height:auto;overflow: scroll;" })
            .Columns(columns =&gt;
            {
                columns.Bound(p =&gt; p.UserId).Width(100);
                columns.Bound(p =&gt; p.Title).Width(200);
                //columns.Bound(p =&gt; p.Summary).Width(140);
                //columns.Bound(p =&gt; p.Description).Width(100);
                columns.Bound(p =&gt; p.LikeCounter).Width(100);
                columns.Bound(p =&gt; p.RateCounter).Width(100);
                // Please attention to this
                columns.Bound(p =&gt; p.IsActive).Template(p =&gt; @Html.ShowIcon(p.IsActive)).Width(80);
                columns.Bound(p =&gt; p.IsActiveNewComment).Width(170);
                columns.Bound(p =&gt; p.CreatedDate).Width(160).Format("{0:G}");
                columns.Bound(p =&gt; p.ModifiedDate).Width(160).Format("{0:G}");
                columns.Command(command =&gt; command.Destroy()).Width(170);
            })
            .ToolBar(toolbar =&gt;
            {
                toolbar.Create();
                toolbar.Save();
            })
            .Editable(editable =&gt; editable.Mode(GridEditMode.InCell))
            .Pageable()
            .Navigatable()
            .Sortable()
            .Scrollable()
            .DataSource(dataSource =&gt; dataSource
                .Ajax()
                .Batch(true)
                .PageSize(20)
                .ServerOperation(false)
                .Events(events =&gt; events.Error("error_handler"))
                .Model(model =&gt; model.Id(p =&gt; p.Id))
                .Create("Editing_Create", "ArticleAdmin")
                .Read("Editing_Read", "ArticleAdmin")
                .Update("Editing_Update", "ArticleAdmin")
                .Destroy("Editing_Destroy", "ArticleAdmin")
            ))
  &lt;/div&gt;
  </code></pre>
  
  <p>Please attention to this part of my code:</p>
  
  <pre><code>columns.Bound(p =&gt; p.IsActive).Template(p =&gt; @Html.ShowIcon(p.IsActive)).Width(80);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>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());
          }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/dZMmX.jpg" alt="My grid"></p>