1 Reply Latest reply on Oct 18, 2010 3:43 AM by liumin hu

    how to highlight rows of cascading <rich:dataTable />s

    Gustavo Ludwig Newbie

      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,