Conditionally Changing the Row Color

[Ryan]

I have a grid that contains several columns.  In the code below I have removed a few just to make it easier to read.  The standard display of this grid has the rows alternating between a light blue and white row color.  I need to be able to change the color of a row based on a specific value in that row.  For example, if the "ReportClassDescription" column is equal to "Express" then the background color for that entire row should be red. 
If it is easier I could also just changed the color of that particular cell.  So again, if "ReportClassDescription" is "Express" then that cell could just be red. 
How can I accomplish either of these scenarios?

01.@(Html.Kendo().Grid(Model)
02.      .Name("ResultList")
03.      .HtmlAttributes(new { style = "font-size:.8em; height:auto;" })
04.      .Columns(columns =>
05.        {
06.
07.          columns.Bound(p => p.ReportID).Width("100px")
08.            .Filterable(filter => filter.Operators(o => o
09.              .ForString(str => str
10.                .Clear()
11.                .Contains("Contains")
12.                .DoesNotContain("Does Not Contain")
13.                .StartsWith("Starts With")
14.                .EndsWith("Ends With")
15.                .IsEqualTo("Equal To")
16.                .IsNotEqualTo("Not Equal To")
17.          )));
18.
19.          columns.Bound(p => p.ClientReportName).Width("100px")
20.            .Filterable(filter => filter.Operators(o => o
21.              .ForString(str => str
22.                .Clear()
23.                .Contains("Contains")
24.                .DoesNotContain("Does Not Contain")
25.                .StartsWith("Starts With")
26.                .EndsWith("Ends With")
27.                .IsEqualTo("Equal To")
28.                .IsNotEqualTo("Not Equal To")
29.          )));
30.
31.          columns.Bound(p => p.ReportClassDescription).Width("100px")
32.            .Filterable(filter => filter.Operators(o => o
33.              .ForString(str => str
34.                .Clear()
35.                .Contains("Contains")
36.                .DoesNotContain("Does Not Contain")
37.                .StartsWith("Starts With")
38.                .EndsWith("Ends With")
39.                .IsEqualTo("Equal To")
40.                .IsNotEqualTo("Not Equal To")
41.          )));
42.
43.          columns.Bound(p => p.ReportTypeDescription).Width("100px")
44.            .Filterable(filter => filter.Operators(o => o
45.              .ForString(str => str
46.                .Clear()
47.                .Contains("Contains")
48.                .DoesNotContain("Does Not Contain")
49.                .StartsWith("Starts With")
50.                .EndsWith("Ends With")
51.                .IsEqualTo("Equal To")
52.                .IsNotEqualTo("Not Equal To")
53.          )));
54.        })
55.      .Pageable(page => page.Refresh(true).Input(true))
56.      .Scrollable()
57.      .Groupable()
58.      .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
59.      .Filterable()
60.      .DataSource(dataSource => dataSource
61.        .Ajax()
62.        .Read(read => read.Action("QueueSearch_Read", "Queue"))
63.        .PageSize(100)
64.        .ServerOperation(true)
65.        )
66.      .Resizable(resize => resize.Columns(true))
67.      .Reorderable(reorder => reorder.Columns(true))
68.      )

[Ignacio]

You can accomplish this using the rowTemplate property for the grid.

Here is a small example
http://jsfiddle.net/FcWBQ/


Hope this helps.

[Ryan]

That example is what I'm looking for I just don't see where/how I would apply that to my code...

[Dimo]

Hi Ryan,

You need a ClientRowTemplate() for the Grid. There is an example in the offline Kendo UI MVC demo site. Its code can also be seen at:

http://demos.kendoui.com/web/grid/rowtemplate.html

Regards,
Dimo
Telerik

[Marcel Härry]

Wow, that's cool, thank you.

[Jean-Philippe]

If you don't want to write the whole line tr and td you can just on databound event :

 

var rows = e.sender.tbody.children();

for (var j = 0; j < rows.length; j++) {
    var row = $(rows[j]);
    var dataItem = e.sender.dataItem(row);

    if (dataItem.get("PropertyName") != 0) {
        row.addClass("someCssColorClass");
    }
}

 

[Swati]

Thanks for the simple and cool post... helped. :)

[Dimo]

Hello all,

We now have a how-to article that demonstrates the discussed scenario. It uses a similar approach to the one Jean-Philippe has shown:

https://docs.telerik.com/kendo-ui/knowledge-base/style-rows-cells-based-on-data-item-values

Regards,
Dimo
Telerik

[Stefan]

@Dimo

The demo link no longer works

[Dimo]

Fixed, thanks.