过滤时可以在 Kendo Telerik 网格中进行条件格式设置吗？答案

【问题标题】：Conditional formatting is possible in Kendo Telerik grid when filtering?过滤时可以在 Kendo Telerik 网格中进行条件格式设置吗？
【发布时间】：2018-04-23 10:10:30
【问题描述】：

我想在应用过滤器时更改 Kendo Telerik 网格中行的背景颜色。我有和 ASP.NET Mvc 应用程序。有可能吗？

【问题讨论】：

你能提供你已经实现的示例代码吗？此外，当应用过滤器时，剑道网格中只存在过滤后的记录，因此所有记录都将具有颜色。这是你需要的吗？

标签： javascript asp.net-mvc kendo-ui telerik

【解决方案1】：

Kendo 的 Grid 有一个内置选项来更改 TRs 的显示方式，称为 rowTemplate。问题是当你使用它时，你必须处理整个行的创建：

columns: [{
    title: "Id",
    field: "Id"
}],
rowTemplate: kendo.template($("#grid-template").html()),
filter: function() {
    rowAlt = 0; // This is a global variable
}

还有模板：

<script id="grid-template" type="text/x-kendo-template">
# let filter = $("\#grid").data("kendoGrid").dataSource.filter();

#<tr class='#

if (++rowAlt % 2 == 0) {
    #k-alt #
}

if (filter != null) {
    #filtered-row#
}

#'><td>#=data.Id#</td>#
#<tr>##
</script>

Demo

现在，还有另一种方法，即按照其他用户的建议，在其外部自定义网格的样式。它使网格的初始化变得简单，并在行渲染后处理样式（在dataBound 事件中）：

filterable: true,
columns: [{
    title: "Id",
    field: "Id"
}],
dataBound: function() {
    window.setTimeout(function() {
        if (this.dataSource.filter()) {
          this.tbody.find("tr").addClass("filtered-row");
        }
    }.bind(this), 1);
}

Demo

_{注意：我在上面的 sn-p 中使用了setTimeout，因为有时会在 DOM 元素完成渲染之前调用 dataBound 事件。}

上面的两个例子我都让它在网格被过滤时在行中添加了一个 bg 颜色，你必须根据包含所有过滤器设置的dataSource.filter() 结果对象来制作你的条件。

【讨论】：

【解决方案2】：

您可以创建一个函数来检查剑道网格上是否存在任何过滤器，然后遍历现有的网格行并将最接近的背景颜色设置为您想要的任何内容。

【讨论】：