如何有条件地格式化包含在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网格行？

回答

相关问题