定制Kendo UI的网格

默认Kendo网格显示列的值，但我想定制它。例如，我想为一列的每个值显示一个图标。我的网格中有一列显示激活或失活的状态。我不想显示“true”或“false”，而是显示适合它的图标。我在网格中使用了“.Template（）”，但“.Template”中的代码没有触发！我该如何解决这个问题？定制Kendo UI的网格

<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>

请注意我的这部分代码：

columns.Bound(p => p.IsActive).Template(p => @Html.ShowIcon(p.IsActive)).Width(80);

和

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()); 
     }

My grid

来源

2014-09-12 Jahan

您可以用ClientTemplate做法如下：

columns.Bound(p => p.IsActive) 
.ClientTemplate("<img src='/Content/#= IsActive ? 'tick.png' : 'cross.png' #''>");

以上只是检查IsActive属性并显示刻度线或十字图像。

来源

2014-09-12 12:35:50 hutchonoid

Thanks.It的正确的，但如果我想IsActive值传递给函数，并返回一个值，我该怎么办？我的目的是复用能力。也许我想用它到另一个网格。如果我想改变我的政策，以显示我的图标，只是改变一个地方不是所有的代码。 – Jahan 2014-09-12 13:39:22

@Jahan我为此使用了一个JavaScript库，并简单地将IsActive值传递给它，因为它是评估客户端。这样您可以重复使用它，并且它位于中心位置。祝好运与其余。 – hutchonoid 2014-09-12 13:56:07

'.ClientTemplate（“#= ModelProp #”）'...这不会返回一个值，但它会给你一个开始 – CSharper 2014-09-12 18:14:49

columns.Bound(p => p.IsActive).ClientTemplate("#= showIcon(IsActive) #").Width(80);

JavaScript函数：

function showIcon(isActive) { 
    var result = ""; 
    if (isActive == true) { 
     result = "<img src='/Content/tick.png'/>"; 
    } else { 
     result = "<img src='/Content/cross.png'/>"; 
    } 
    return result; 
}

来源

2014-09-12 14:49:34 Jahan

定制Kendo UI的网格

回答

相关问题