This is a migrated thread and some comments may be shown as answers.

Cell background colors based on non-displayed fields

4 Answers 381 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 17 Jun 2015, 04:40 PM

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?

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Jun 2015, 08:39 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 19 Jun 2015, 05:54 PM

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.

0
Dimo
Telerik team
answered on 22 Jun 2015, 02:43 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 22 Jun 2015, 05:30 PM
Oops, I'm out of practice with jQuery.  It's been a while since I've done web development.
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Matt
Top achievements
Rank 1
Share this question
or