如何有条件地格式化标签条中包含的 Kendo UI Grid 行？

Question

我对剑道 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>
                );

        }))

虽然目前我没有检查特定值，但我想根据某些条件对其进行着色，但即使是用红色为行着色的简单任务也不起作用。有什么想法吗？

Answer 1

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

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

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

... 关于行模板，ClientRowTemplate() 方法仅在使用 Ajax 绑定时适用，因此在当前情况下，它未应用于 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 的值有条件地格式化各种行/单元格。最终将条件格式（应用各种类）应用于“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>"
)