javascript - 过滤时可以在 Kendo Telerik 网格中进行条件格式化吗？

Question

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

Answer 1

Kendo 的网格有一个内置选项可以更改 TR 的显示方式，称为 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

_{注意:我在上面的代码片段中使用了 setTimeout，因为有时 dataBound 事件会在 DOM 元素完成渲染之前被调用。}

上面的两个例子，每当网格被过滤时，我都会在行中添加背景颜色，您必须根据 dataSource.filter() 结果对象制定条件，其中包含所有过滤器设置.