定製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的網格

回答

相關問題