2 Replies Latest reply on Mar 31, 2010 5:24 AM by Johan Borchers

    DataTable - Vertical Scroll Bar

    Vinny Tiwari Newbie

      Hi,

       

        I am using rich:datatable to display rows of data. I am wondering if there is any ways by which I can have Vertical Scrollbar to scroll through the table vertically. I want all the rows to displayed with scrolling feature to the user. I used datascroller for pagenation but want to have both vertical scrolling as well as pagenation.

       

      Pl. guide me.

       

      Thanks,

        • 1. Re: DataTable - Vertical Scroll Bar
          Nick Belaevski Master

          Hi Vinny,

           

          Have you tried rich:extendedDataTable?

          • 2. Re: DataTable - Vertical Scroll Bar
            Johan Borchers Newbie

            Hi,

             

            I'm using a datatable with vertical scrollbar. The extended datatable is nice but takes more time in redrawing on responding to node selects of a tree. The "old" datatable is reacting more smooth because its less complex.

             

            What I did was using 2 datatables on top of each other. One for the header and one for the rows. The rows datatable is wrapped in a DIV with scrollbars. At the end I'm also using a dummy column using as much space as the widest scrollbar in different browsers. Then al the colomn dividers of the top header table and colomn table will stay on each other.

             

            You can also see the use of a background-image. That is a one pixel line with the same colour as the border of the datatable.

            I you give the rows div a height you normaly won't see a left border. Now the background image is simulating the left border of the rows table beacause the background image is in line with the left border of the datatable.

            This is useful if your table contains only a few rows and does not occupy all the vertical height.

             

            Hope that it's useful for you!

             

            Johan

             

             

            The code:

             

            <div id="production-list-header-div">
              <rich:dataTable columns="3" columnsWidth="80,300" style="width: 100%;">
                <rich:column sortable="false">
                  <f:facet name="header">
                    <h:outputText value="Projectnr." />
                  </f:facet>
                </rich:column>
                <rich:column sortable="false">
                  <f:facet name="header">
                    <h:outputText value="Gidstitel" />
                  </f:facet>
                 </rich:column>
                 <rich:column sortable="false">
                   <f:facet name="header">
                  </f:facet>
                 </rich:column>
              </rich:dataTable>
            </div>
            <div id="production-list-rows-div" style="background-image: url('../images/div-border-left.jpg'); background-repeat: repeat-y; height: 400px; overflow: scroll;">
              <rich:dataTable value="#{productionHandler.productions}" var="prod"
                  columns="3" columnsWidth="80,300"
                  style="border-top-width: 0px; width: 100%;">
                <rich:column sortable="false" >
                  <h:outputText value="#{prod.code}" />
                </rich:column>
                <rich:column sortable="false">
                  <h:outputText value="#{prod.broadcastTitle}" />
                 </rich:column>
                 <rich:column sortable="false">
                 </rich:column>
              </rich:dataTable>
            </div>