如何有条件地格式化包含在选项卡中的 Kendo UI 网格行？

Question

我是 Kendo UI 的新手。

我正在尝试使用 Razor 语法有条件地为 Kendo UI 网格内的行着色。网格包含在 Kendo UI 标签条中。这是我写的代码：

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

        }))

虽然目前我没有检查特定值，但我想根据某些条件为其着色，但即使是将行着色为红色这样简单的任务也无法正常工作。有什么想法吗？

Answer 1

我正在回答我自己的问题，以便将来搜索同一主题。

原来问题出在网格的当前绑定是服务器绑定，ClientRowTemplate() 仅在使用 Ajax 绑定时适用，因此根本没有得到应用.将数据源更改为 Ajax，效果非常好。

我最终打开了 Telerik 的支持票，以下是我得到的回复：

... Regarding the row template, the ClientRowTemplate() method is applicable only when Ajax binding is used, so in the current case it was not applied to the Grid. ...

现在这是我的代码，其中包含条件格式的行：

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

为了将绑定从服务器绑定更改为 Ajax，只需将以下内容添加到网格中：

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

我想要的是根据 BookID 的值有条件地格式化各种 rows/cells。最终将条件格式（应用各种类）应用于 '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>"
)

如何有条件地格式化包含在选项卡中的 Kendo UI 网格行？

How to conditionally format a Kendo UI Grid row containted inside a tabstrip?

telerik

kendo-ui

kendo-grid

kendo-asp.net-mvc