Conditional formatting is possible in Kendo Telerik grid when filtering?

Question

I'd like to change background color of the rows in a Kendo Telerik grid, when applied a filter. I have and ASP.NET Mvc application. Is it possible?

Answer 1

Kendo's Grid has a built in option to change how the TR s are displayed, called rowTemplate . The problem is that when you are using it, you have to deal with the whole row creation:

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

And the template:

<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

---

Now, there is another way, which means to customize the grid's styles outside it, as proposed by other users already. It maked the grid's initialization simple and handles the styles after the rows are rendered(in dataBound event):

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

_{Note: I'm using setTimeout in the snippet above because sometimes the dataBound event is called before the DOM elements are finished rendering.}

Both examples above I made it added a bg color in the row whenever the grid is filtered, you have to make your conditions based on dataSource.filter() result object, which contains all filter settings.

Answer 2

您可以使函数检查剑道网格上是否存在任何滤镜，然后遍历现有的网格行并将最接近的背景色设置为所需的任何颜色。