如何有條件地格式化包含在tabstrip內的Kendo UI網格行？

我對Kendo UI相當陌生。如何有條件地格式化包含在tabstrip內的Kendo UI網格行？

我試圖有條件地使用Razor語法爲Kendo UI網格內的行着色。網格包含在Kendo UI Tabstrip內。這是我寫的代碼：

@(Html.Kendo().TabStrip() 
    .Name("tabstrip") 
    .Items(items => 
     { 
      items.Add().Text("Books") 
       .Selected(true) 
       .Content(
       @<text>@(Html.Kendo().Grid((IEnumerable<Library.Models.Books>)ViewBag.Books) 
          .Name("grid2") 
          .Columns(columns => 
          { 
           columns.Bound(books => books.BookID); 
           columns.Bound(books => books.BookName); 
          }) 
          .ClientRowTemplate(
           "<tr class= 'red' data-uid='#= uid #'>" + 
           "<td>#: BookID #</td>" + 
           "<td>#: BookName #</td>" + 
           "</tr>") 
          .Pageable() 
          .Sortable() 
       ) 
       </text> 
       ); 

     }))

雖然，此刻，我不檢查特定的價值觀，我想基於一些條件來顏色故，但着色連這個簡單的任務紅色的行不起作用。有任何想法嗎？

來源

2016-04-06 SJaka

您可以檢查這個帖子：http://www.telerik.com/forums/conditionally-changing-the-row-color – calinaadi

@calinaadi謝謝您的答覆。是的，我已經通過這個鏈接和其他一些Telerik資源。不知道我的代碼有什麼問題。 – SJaka

我正在回答我自己的問題，關於同一主題的任何未來搜索。

事實證明，問題在於網格的當前綁定是服務器綁定，而ClientRowTemplate（）僅在使用Ajax綁定時適用，因此它根本沒有得到應用。將數據源更改爲Ajax，並且它像魅力一樣工作。

我結束了打開與Telerik的支持票，下面是我得到的迴應：

...關於該行模板時，ClientRowTemplate（）方法只適用在綁定使用的Ajax，所以在目前的情況下，它不適用於電網。 ...

這裏是我的代碼現在條件格式化的行：

@(Html.Kendo().TabStrip() 
    .Name("tabstrip") 
    .Items(items => 
     { 
      items.Add().Text("Books") 
       .Selected(true) 
       .Content(@<text>@(Html.Kendo().Grid((IEnumerable<Library.Models.Books>)ViewBag.Books) 
          .Name("grid2") 
          .Columns(columns => 
          { 
           columns.Bound(books => books.BookID); 
           columns.Bound(books => books.BookName); 
          }) 
          .ClientRowTemplate(         
           "<tr data-uid='#= uid #'>"+ 
            "<td class='#= BookID == 1 ? \"red\" : BookID == 2 ? \"orange\" : BookID == 3 ? \"yellow\" : \"green\" #' style=\"text-align:center;\">#: BookID #</td>" + 
            "<td>#: BookName #</td>" + 
           "</tr>" 
           ) 
         .Pageable() 
         .Sortable() 
         .DataSource(datasource => datasource 
            .Ajax() 
            .PageSize(20) 
            .ServerOperation(false) 
         ) 
      ) 
      </text> 
      ); 
    }))

爲了改變從服務器綁定到阿賈克斯的綁定，只需添加以下到網格：

.DataSource(datasource => datasource 
       .Ajax() 
       .PageSize(20) 
       .ServerOperation(false) 
)

我之後的工作是根據BookID的值有條件地格式化各行/單元格。結束將條件格式（應用各種類）應用於'td'標籤。如果整行需要有條件地格式化，而不是單元格，則可以應用相同的'tr'標記。即

.ClientRowTemplate("<tr class='#= BookID == 1 ? \"red\" : BookID == 2 ? \"orange\" : BookID == 3 ? \"yellow\" : \"green\" #' data-uid='#= uid #'>"+ 
    "<td>#: BookID #</td>" + 
    "<td>#: BookName #</td>" + 
    "</tr>" 
)

來源

2016-04-07 15:35:11 SJaka

如何有條件地格式化包含在tabstrip內的Kendo UI網格行？

回答

相關問題