topic Re: Row Renderer? How to color a whole row when condition is met on one of its cells? in Dashboards & Visualizations

Row Renderer? How to color a whole row when condition is met on one of its cells?

jamesvz84 — Tue, 15 Jul 2014 21:06:03 GMT

I have used the BaseCellRenderer to color individual cells based on conditions and it had worked great for me.

Now I need to color a whole row whenever a condition is met on one of its cells.

Is there some type of Row Renderer I can use to color the table row? If not, what would be the best way to accomplish this?

Re: Row Renderer? How to color a whole row when condition is met on one of its cells?

barakreeves — Tue, 15 Jul 2014 21:20:41 GMT

Are you using Django bindings?

Re: Row Renderer? How to color a whole row when condition is met on one of its cells?

jamesvz84 — Tue, 15 Jul 2014 21:30:14 GMT

No, I am using simple xml with

Re: Row Renderer? How to color a whole row when condition is met on one of its cells?

martin_mueller — Tue, 15 Jul 2014 21:44:51 GMT

Your JS renderer does have access to the td element, right? If so you may be able to grab hold of its parent, the tr element, and set its CSS or class attributes.

Re: Row Renderer? How to color a whole row when condition is met on one of its cells?

jamesvz84 — Wed, 16 Jul 2014 16:56:27 GMT

I tried to get a hold of its parent using .parent() and .closest('tr') functions, but neither worked. I debugged using chrome and it seems like $td has no parent. Is there some other way to get its parent?

Re: Row Renderer? How to color a whole row when condition is met on one of its cells?

martin_mueller — Wed, 16 Jul 2014 17:13:52 GMT

Bugger, sounds as if the renderer is getting the td before it's been hung into the DOM tree... and there's no parent selector in CSS either.

You could move the getting and CSS'ing of the parent into a delayed function, but that'd be quite ugly programming practice. Might work as a QnD temporary solution though.

Re: Row Renderer? How to color a whole row when condition is met on one of its cells?

LukeMurphey — Wed, 16 Jul 2014 18:50:39 GMT

This is a little complicated because the cell is not put into the DOM so you cannot move up to the parent to style it.

You can do it with some complicated CSS though. Here's how:

Move or copy the row that has the data that you want to use for declaring how the row will be styled to the first column. If you don't really want it to be the first column, then just include it twice and hide the first one with some CSS (in dashboard.css or application.css).
Add a cell renderer that defines a class that will be used for determining the color of the row; have it put the class information to the first column.
Add application CSS (in dashboard.css or application.css) that will use adjacent sibling selectors to style the TD elements based on the class in the first cell. The CSS would look something like this (assuming that your cell renderer applies the class "makerowred" to the first cell):

/* styles the first cell */
td.makerowred{
color: red;
}

/* styles the second cell */
td.makerowred + td{
color: red;
}

/* styles the third cell */
td.makerowred + td + td{
color: red;
}