2 Replies Latest reply on Mar 20, 2009 11:45 AM by bwarren

    scrollableDataTable header height

      I'm seeing inconsistent behavior between the RichFaces dataTable, extendedDataTable, and scrollableDataTable regarding header row height.

      My requirements are that a certain number of left columns and the header row must be scroll locked for horizontal and vertical scrolling. Naturally, scrollableDataTable is the answer...

      here is the code I'm looking at:

       <rich:dataTable value="#{rtdBackingBean.departureDataModel}"
       var="row" width="100%">
      
       <rich:column width="45px">
       <f:facet name="header">
       <h:outputText value="Dest"/>
       </f:facet>
       <h:outputText value="#{row.departure.arrivalCity}"/>
       </rich:column>
      
       <rich:column width="45px">
       <f:facet name="header">
       <h:outputText value="Flight"/>
       </f:facet>
       <h:outputText value="#{row.departure.flightNumber}"/>
       </rich:column>
      
       <rich:column width="55px">
       <f:facet name="header">
       <h:outputText value="ETD"/>
       </f:facet>
       <h:outputText value="#{row.departure.departureTime}">
       <joda:convertDateTime type="both" pattern="h:mma"/>
       </h:outputText>
       </rich:column>
      
       <rich:column width="45px">
       <f:facet name="header">
       <h:outputText value="Gate"/>
       </f:facet>
       <h:outputText value="#{row.departure.departureGate}"/>
       </rich:column>
      
       <rich:column width="65px">
       <f:facet name="header">
       <h:outputText value="Status"/>
       </f:facet>
       <h:outputText value="#{row.departure.status}"/>
       </rich:column>
      
       <rich:column width="55px">
       <f:facet name="header">
       <h:outputText value="Bags"/>
       </f:facet>
       <h:outputText value="#{row.departure.unloadedBagCount}(#{row.departure.bagCount})"/>
       </rich:column>
      
       <rich:column width="55px">
       <f:facet name="header">
       <h:outputText value="Local"/>
       </f:facet>
       <h:outputText value="#{row.departure.localConnection.unloadedBagCount}(#{row.departure.localConnection.bagCount})"/>
       </rich:column>
      
       <rich:column width="55px">
       <f:facet name="header">
       <h:outputText value="Xfer"/>
       </f:facet>
       <h:outputText value="#{row.departure.unloadedTransferBagCount}(#{row.departure.transferBagCount})"/>
       </rich:column>
      
       <rich:columns var="arrival" index="index"
       value="#{rtdBackingBean.departureDataModel.arrivals}"
       width="65px">
       <f:facet name="header">
       <h:panelGrid>
       <h:outputText value="#{arrival.carrier}"/>
       <h:outputText value="#{arrival.flightNumber}"/>
       <h:outputText value="#{arrival.origination}"/>
       <h:outputText value="#{arrival.eta}">
       <joda:convertDateTime type="both" pattern="h:mma"/>
       </h:outputText>
       <h:outputText value="#{arrival.gate}"/>
       <h:outputText value="#{arrival.status}"/>
       </h:panelGrid>
       </f:facet>
       <h:outputText value="#{row.connections[index].value}"/>
       </rich:columns>
      
       </rich:dataTable>
      


      Notice the headers for the dynamic columns are panelGrids. Everything looks fine with a dataTable:

      http://i77.photobucket.com/albums/j52/screech_bw/dataTable.jpg

      Change dataTable to extendedDataTable and everything still looks fine, except the right side of the table gets chopped off and I don't get a horizontal scroll bar at the bottom:

      http://i77.photobucket.com/albums/j52/screech_bw/extendedDataTable.jpg

      This issue has already been submitted and I want the left column locking behavior anyway, so moving on...

      Change the dataTable to scrollableDataTable and I get the desired locking behavior and both scrollbars. However, the header row refuses to resize to the panelGrid's height:

      http://i77.photobucket.com/albums/j52/screech_bw/scrollableDataTable.jpg

      I've tried doing this:

      .rich-sdt-header-row {
       height: 100%;
      }
      


      and also manually assigning my own style class with pixel and % height to the table headerClass, columns headerClass, and panelGrid styleClass to no avail. I saw somewhere on here that resizing row height was a known issue on the scrollableDataTable in general.

      Anybody know of a workaround or see something I'm doing wrong? This is a showstopper for me.

        • 1. Re: scrollableDataTable header height
          konstantin.mishin

          You might use next code:

          .rich-sdt-header-cell .dr-sdt-cbody {
          height:50px;
          }
          But you should set height in px (not % and etc.)

          • 2. Re: scrollableDataTable header height

             

            "konstantin.mishin" wrote:
            You might use next code:
            .rich-sdt-header-cell .dr-sdt-cbody {
            height:50px;
            }
            But you should set height in px (not % and etc.)


            That works, unfortunately it changes the row height for every row in the table:

            http://i77.photobucket.com/albums/j52/screech_bw/allRowsRowHeight.jpg

            I just want the header cells to have a different row height.

            I tried only setting .rich-sdt-header-cell. That works. However, the data inside the header cells is still getting chopped off.

            http://i77.photobucket.com/albums/j52/screech_bw/headerRowHeight.jpg

            It appears that the .dr-sdt-cbody style class is being used for all cells in the table irregardless of whether they are a header or not. Is there another style class I can apply the row height to that will only affect the visibility of data in the header cells? Is there documentation somewhere that shows all of the style classes for the scroll table (the richfaces user guide appears to be incomplete)?

            Also, it would be ideal to have the cells automatically adjust their height to the contents (like how the all the other datatables work) rather than having to hardcode a pixel size.