1 Reply Latest reply on Dec 7, 2012 3:38 AM by jmsjr

    rich:extendedDataTable and styling based on showcase from rich:dataTable

    jmsjr
    jmsjr Nov 29, 2012 9:29 PM

      Using RichFaces 4.2.3-Final

       

      Hi,

       

      • rich:dataTable generates an HTML <thead> for the column heading, and the actual rows of the table are in an HTML <tr> within an HTML <tbody>

       

      • On the other hand, rich:extendedDataTable generates a separate HTML <table> for the column heading and a separate HTML <table> for the actual rows of the table. The columns on the table end up being an ordinary HTML <tr>. Both HTML <table> tags are inside a <div>.

       

       

      This causes a few issues:

       

      • Following the example styling ( zebra-coloring for alternate rows ) from showcases for rich:dataTable and applying it for rich:extendedDataTable, the column heading then looses its original color of blue and changes to white, as the heading is the first row in its own table. The first row in the actual rows, because they are on their own table, also has a colour of white.

       

      So you have: white for the header, white for the 1st row, blue for the 2nd row, white for the 3rd .. etc.

       

      • Again, using the mouse-over showcase example from rich:dataTable and applying it to rich:extendedDataTable, it would appear to the user that the heading is a selectable row ( e.g. It changes colour to orange when the mouse is hovering over the column headings of a rich:extendedDataTable ). This behaviour does not happen for rich:dataTable.

       

      I need to use rich:extendedDataTable because of the row selection feature.

      Any ideas or workarounds so that the heading columns of a rich:extendedDataTable behave like the heading columns of a rich:dataTable ??

       

      So alternatively:

      *) Use rich:dataTable with selectable row feature from rich:extendedDataTable ( a single row selection is all I need )

      *) Use rich:extendedDataTable, but have the heading behave like the heading in rich:dataTable

       

      P.S. I would like to show some screenshots explaining the issue but I have been getting an intermittent HTTP 500 from the JBoss community site since yesterday when I try to login, and intemittently when I post ... and the image upload does not seem to work at the moment.

      • 1015 Views
      • Tags:
        • 1. Re: rich:extendedDataTable and styling based on showcase from rich:dataTable
          jmsjr
          jmsjr Dec 7, 2012 3:38 AM (in response to jmsjr)

          For anyone interested:

           

          There is actually an attribute in both rich:dataTable and rich:extendedDataTable called "rowClasses" that allows you to specify the CSS class for the rows, and you can specify more than one CSS class ( separate by comma ). If there is more than one, the classes are applied alternately. I did not know about this attribute until I bumped into it in another site, as the attribute was not mentioned at all in the on-line documentation.

           

          So instead of using rich:jQuery from the showcase for rich:dataTable to implement zerba colouring, use rowClasses instead.

          Then only use rich:jQuery for the active row selection, but change the selector so that it only applies to the rows of the rich:extendedDataTable so that it does not apply to the header. by specifying the CSS class used as default by richfaces for the extendedDataTable's body ( which is .rf-edt-b ), like so:

           

           

          {code}
          <rich:jQuery id="contactsMouseOver" selector="#contactDetails .rf-edt-b tbody tr" event="mouseover" query="jQuery(this).addClass('active-row')" />

          <rich:jQuery id="contactsMouseOut" selector="#contactDetails .rf-edt-b tbody tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
          {code}
           
            • Actions