1 Reply Latest reply on Jul 2, 2010 12:21 PM by jackalope

    Dynamically changing row class for active/inactive items in rich:extendedDataTable

    jackalope

      I'm wondering if anyone has experience with, or has ideas on how to change the CSS style for active/inactive rows in rich:extendedDataTable. I would like to change the behavior as follows:

       

      1. Visually indicate whether a row is active/inactive. Active rows would remain white and inactive rows would be grey. Ideally just changing the CSS style of the row accordingly.

      2. Selected rows would be blue.

      3. Active/inactive rows change dynamically such that the CSS styles would have to be changed on reRender or with javascript.

       

      Right now I'm leaning towards just building my own table and using jquery to handle selections. But if anyone has any ideas for extendedDataTable that would be very helpful as I'm already using it pretty heavily.

        • 1. Re: Dynamically changing row class for active/inactive items in rich:extendedDataTable
          jackalope

          My Solution:

           

          1. Accomplished this by setting active/inactive on my model for each row item and interrogating this when rendering the the extendedDataTable. Each rich:column sets its own "styleClass" based on active/inactive state of the model. Depends on the table being rerendered which is fine for my case.

           

          2. This was quite easy as extendedDataTable already supports this. I added a new class for the selected row to my stylesheet and set "selectedClass" on extendedDataTable to use this new class.

           

          3. The trickiest bit. Used jquery that listens for a click on a row in each of my extendedDataTables needing this functionality. A jquery callback then updates the classes of all the rows in the rendered table as needed.

           

          It works, but at the moment doesn't handle keyboard only selections such as "ctrl + a" or "shift + up" and "shift + down"...