Cell background colors based on non-displayed fields

[Matt]

I have a grid with a number of related columns, and I need to be able to make some of the cells have background colors based on some of the fields of data in my dataSource.  The fields that will be determining the background colors aren't the same ones as will be supplying the text in those cells.

For example the route column will have a background color based on the route color field and the vehicle column will have a background color based on the vehicle color field.

I also need to be able to set the colors based on RGB, not just by giving them a class.

Does anyone know how to do this?

[Dimo]

Hi Matt,

Yes, it is possible to style table cell background, depending on another field. Please check the following article:

http://docs.telerik.com/kendo-ui/web/grid/how-to/style-rows-cells-based-on-data-item-values

Regards,
Dimo
Telerik

 

[Matt]

Unfortunately that doesn't work for my situation.  I need to be able to set the colors by RGB instead of by adding a class.

I tried this

dataBound: function (e) {
                    // get the index of the Name column
                    var columns = e.sender.columns;
                    var columnIndex = 0;
                    for (var j = 0; j < columns.length; j++) {
                        if (columns[j].field == "Name") {
                            break;
                        }
                        columnIndex++;
                    }
                    // iterate the table rows and apply custom row and cell styling
                    var rows = e.sender.tbody.children();
                    for (var j = 0; j < rows.length; j++) {
                        var row = $(rows[j]);
                        var cell = row.children().eq(columnIndex);
                        cell.css("background-color: yellow");
                    }
                }

 

This is a simplified version I was trying.  I took out the part that looks at the value it needs to decide what color, and was just making the entire column yellow.  It didn't work.

[Dimo]

Hi Matt,

The .css() jQuery method requires the style property and style value to be two separate arguments.

https://api.jquery.com/css/

Regards,
Dimo
Telerik

[Matt]

Oops, I'm out of practice with jQuery.  It's been a while since I've done web development.