onRender background colour of header

for odd, even and selected you should use a style, not the onRender event. Have a look at the style sample, for example:

selected {
background-color: #3D80DF;
}

odd {
background-color: #f0f0f0;
}

even {
background-color: #FFFFFF;
}

What if you want selected rows to have a background color based on some field value in those rows? What is now the best practice? I don’t want those fields highlighted but rather the whole background of the row in table view and not based simply on selected, odd or even. Used to be rowBackgroundColor but that is now deprecated and I’m just not sure what is the best practice for achieving the same result. There aren’t thousands of rows, maybe a hundred or two hundred at most that might be viewed and those would remain for the whole of the day (so not much dynamic changing of the foundset showing these rows).

Hi John,

For that you would need to use the onRender event.

Hope this helps.

But does the onRender work well, efficiently with changing the row background color I guess is my question. I seem to remember somewhere that it isn’t as efficient as the old rowBackgroundColor. Or am I just imaging stuff again in my old age… Is there a best practices way to do it?

Hi John,

I just conducted some speed tests by doing a foundset.clear() and foundset.loadAllRecords() with and without the onRender event.
I tested on both table view and listview and in all instances the onRender is perhaps 1-2 milliseconds slower than without the onRender event.
All tests were done in Smartclient in Developer 6.0.5.

I used the following testcode:

foundset.clear();
var _d = new Date();
foundset.loadAllRecords();
application.output(new Date() - _d);

And the following onRender code:

function onRender(event) {
    if (event.isRecordSelected()) {
        event.getRenderable().bgcolor = '#00ff00';
    } else if (event.getRecordIndex() % 2) {
        event.getRenderable().bgcolor = '#ff0000';
    } else {
        event.getRenderable().bgcolor = '#000000';
    }
}

Thanks Robert! So with those results it would seem to not even make any difference speed-wise at least in using the onRender event for background color of selected, odd and even rows instead of style sheets. (Although onRender did seem to change the label background color in Chris’s case who started this thread).

john.allen:
(Although onRender did seem to change the label background color in Chris’s case who started this thread).

It did not do that in my test…

Hi John,

Like Patrick I don’t see this either.

HI John,

you can even combine, the CSS style sheet AND onRender.

do the simple stuff, by CSS, and the more complex stuff by onRender… (btw what you do in onRender, will override the CSS)
It works great!

Harjo:
(btw what you do in onRender, will override the CSS)

I don’t know why, but it doesn’t work for me :(

In my CSS I have this:

odd
{
	background-color: #FFFFFF;
}

And I have this method attached to onRender event of the field:

function onRender(event)
{
	/**
	 * @type {JSRecord<db:/gevs/psi_gevs_reservas_solicitudes>}
	 */
	var rec = event.getRecord();
	if(rec) {
		event.getRenderable().bgcolor = '#80ff00';
	}
}

Bgcolor of all rows (odd and even) should be #80ff00, but it’s always #FFFFFF in odd rows.

as Harjo said, the onRender will override the CSS;
can you check the value of event.getRecord() in your onRender ? is that null ?

juan.cristobo:

Harjo:
(btw what you do in onRender, will override the CSS)

I don’t know why, but it doesn’t work for me :(

In my CSS I have this:

odd

{
background-color: #FFFFFF;
}




And I have this method attached to onRender event of the field:



function onRender(event)
{
/**
* @type {JSRecorddb:/gevs/psi_gevs_reservas_solicitudes}
*/
var rec = event.getRecord();
if(rec) {
event.getRenderable().bgcolor = ‘#80ff00’;
}
}




Bgcolor of all rows (odd and even) should be **#80ff00**, but it's always **#FFFFFF** in odd rows.

The style sample doesn’t have any table views or mention of CSS ‘selected’ that I can see.