Best way to change the bgColor of a table row

Classic Servoy
1

In a table form, I would like to have some rows appear with another background color.
So far I use the following function to change the bgColor of a single field in the table, and I call that function in the onRender of that field.

However when I start to call that function on some other fields/columns, I get exception messages like this:
TypeError: Cannot read property “pe_level_nr” from (D:\workspaces\projecteim\project\forms\frm_project_wbs_costs_tbl.js#918)

(That started when I set the onRender for a date field, but I could not see any reason why that date field did not like the onRender.)

My question: is there another way to change the bgColor of a complete table line based on a specific condition, other than calling the onRender for each table field/column?

function onRender(event) {

	var
		/** @type {JSRecord<db:/bob/project_elements>} **/
		rRec = event.getRecord();

	if (rRec.pe_level_nr >= 2  &&  rRec.pe_is_leaf != 1) {
		
		event.getRenderable().bgcolor = bgColorLevel2;
	}
	else if (rRec.pe_level_nr === 1) {

		event.getRenderable().bgcolor = bgColorLevel1;
	}
}
2

Hi Bernd,

+1 for your question. I believe the answer is no.

I (also ?) find the onRender event on column level a bit of overkill for data bound table row coloring.

Regards,

3

Hi Bernd

If you are able to switch from Table to List view you could add a non-transparent Label underneath the Date field with an unstored calculation.

May not win any awards for being an elegant solution could resolve the situation for you .

Regards

4

I guess the reason for the date field “not liking the onRender” is that there is no record yet when that specific event fires. You should check, if you actually have a record already:

function onRender(event) {
   /** @type {JSRecord<db:/bob/project_elements>} **/
   var rRec = event.getRecord();
   if (rRec  && rRec.pe_level_nr >= 2  &&  rRec.pe_is_leaf != 1) {
      event.getRenderable().bgcolor = bgColorLevel2;
   }
   else if (rRec && rRec.pe_level_nr === 1) {
      event.getRenderable().bgcolor = bgColorLevel1;
   }
}

The error

Cannot read property “pe_level_nr” from

suggests, you are trying to read pe_level_nr from nothing (“… from ??”)

5

Thanks a lot, Patrick, that solved it, it works fine now.

6

Bernd.N:
My question: is there another way to change the bgColor of a complete table line based on a specific condition, other than calling the onRender for each table field/column?

No, currently there isn’t, although you don’t need to assign this function to the onRender event of each column, but could assign it to the onRender event of the form.

If you don’t have any conditions, use CSS to style the rowBgColor :!:

Be aware that onRender will not work in the new Servoy 8 ng-client (https://wiki.servoy.com/display/DOCS/NG … patibility)

7

mboegem:
you don’t need to assign this function to the onRender event of each column, but could assign it to the onRender event of the form.

We tried that first. The problem was that it also changed the elements in the title header of the form, they got green when we applied the example code that the form-onRender puts in automatically.

We could have solved that by creating a form with a tab panel, where we put the table form into the tab without title header, and the elements of the title header to the holding form. But as the form otherwise runs good so far, and we do not see performance issues due to the onRender() of each column, we currently prefer to stay with the now found solution.
In case performance issues will arise, we keep your suggestion in mind.

It seems you can even combine both onRender, and the onRender of the single fields run after the form-onRender. That gives the most flexibility, as single columns may need to be styled differently.