1 Reply Latest reply on Jan 17, 2011 1:25 PM by Eric Ford

    Problem setting column widths in scrollableDataTable

    Eric Ford Newbie

      I'm using RF 3.3.3.Final  I have a scrollableDataTable for which the number, position, and contents of columns are dynamically determined. 

       

      To do this I use the following markup:

       

        <rich:scrollableDataTable id="queryResult" value="#{queryBean.results}" var="outRow" columnClasses="queryBean.columnClasses">

            <rich:columns value="#{queryBean.resultHeaders}" var="hdr" index="idx" headerClass="#{queryBean.colClass[idx]}">

                    <f:facet name="header">

                            <h:outputText value="#{hdr}" styleClass="#{queryBean.colClass[idx]}"/>

                    </f:facet>

                    <h:outputText value="#{outRow[idx]}" escape="false" styleClass="#{queryBean.colClass[idx]}"/>

            </rich:columns>

        </rich:scrollableDataTable>

       

      The output of "queryBean.columnClasses" is a comma delimited string containing the appropriate, predefined CSS class names for the columns generated.  The colClass[] contains an array version of the same with one entry per array element.

       

      For the most part this works fine.  However, the content of each column is truncated at 100px width, regardless of the widths set in the CSS classes for the columns.  The columns themselves, as indicated by their borders, are generated and styled correctly including the width - only the contents are truncated.  When I check the output style information using Firebug I see the following when I select the div that actually contains the cell contents:

       

          #queryResult .rich-sdt-c-0 {

                  width: 100px;

          }

       

          .col200 {

                  width:200px;  <-- this one is lined out indicating it is overridden by the value above it

          }

       

          .<... further style elements ...>

       

       

      I tried altering definition for rich-sdt-c-0 in a .css file but that just gives me the following result:

       

          #queryResult .rich-sdt-c-0 {

                  width: 100px;

          }

       

          .rich-sdt-c-0 {

                  width: 200px;  <-- this one also is lined out indicating it is overridden by the value above it

          }

       

          .col200 {

                  width:200px;  <-- this one is lined out indicating it is overridden by the value above it

          }

       

          .<... further style elements ...>

       

      Altering the theme definition is not a viable solution, even if it might correctly size the column, because the column style required, in particular the width) is determined dynamically based on the data selected by the user.

       

      If I resort to fixed, individual rich:column tags instead of using the rich:columns tag then the columns and contents are all styled correctly.  This appears to be a bug in the rendering of the rich:columns tag. 

       

      Can anyone point me to a style/styleClass setting I may have overlooked?  If not, I would appreciate any suggestions for alternative approaches.  The only thing I've come up with would be to bind the table definition server-side and generate it all there.  I haven't tried this yet and was hoping to avoid it.

        • 1. Re: Problem setting column widths in scrollableDataTable
          Eric Ford Newbie

          Okay, I think I found my own answer through experimentation.  Apparently, the columnClasses and styleClass settings for the scrollableDataTable are not fully implemented when using the columns tag without also defining each column tag individually.  To get the results I expected (i.e., consistent header, column and data content widths) I had to abandon css and resort to directly setting the "width" attribute:

           

                <rich:columns value="#{queryBean.resultHeaders}" var="hdr" index="idx" width="#{queryBean.colClass[idx]}">

           

          where colClass[] is a server side array containing the desired width settings defined in concert with generating my column data.

           

          Incidently, I worked this out using the extendedDataTable which suffers from similar problems.  However, while this approach works with the extendedDataTable for initially rendering the output, if you resize your screen then the column width settings are ignored and the columns are reRendered with equal percentage widths across the defined table width. This doesn't seem to occur with the scrollableDataTable.