Hi everybody!
I have a jsf page with four <rich:dataTable /> inside a <h:panelGrid columns=4 />. When this page is first loaded, only the leftmost <rich:dataTable /> is populated from a list and all the others are empty. Every row is a <a4j:commandLink /> that upon click, the associated value is used to filter down the values on the second <rich:dataTable />. The same behaviour is used for populating the third and four <rich:dataTable />s. Might seem complex but works very nicely!
The <rich:dataTable /> shown on this page are display information in the following manner:
the first <rich:dataTable />: object A;
the second <rich:dataTable />: object B (one of its attributes is id of A);
the third <rich:dataTable />: object C (one of its attributes is id of B);
the fourth <rich:dataTable />: object D (one of its attributes is id of C);
Since this is working, I know which object is selected on each row. When this object is selected, I get its id and pass it on to the managed bean so I can populate my next <rich:dataTable /> with this id. To do so I use a <f:setPropertyActionListener />.
Now, follow me on a little example! Say the first <rich:dataTable /> has 4 rows. The second <rich:dataTable /> populated after clicking the link on the second row on the first <rich:dataTable /> has 12 rows. Say I click on the 7th row link and the third <rich:dataTable /> is populated with 5 rows. And (finally!) the last <rich:dataTable /> is populated with another 9 rows. Pretty confusing, right?
Now I'd like to change the selected row background on each <rich:dataTable /> to highlight it so the user can visually identify:
- to which Object A belongs the shown list of Object B;
- to which Objects A and B belongs the shown list of Object C;
- to which Objects A, B and C belongs the shown list of Objects D.
I tryied using a JavaScript to do so, but couldn't get it to work.
Ideas helping to implement this are most welcome!
Thanks in advance,
