How can i get Vertical Scrollbar for GWT CellTable

1
votes

I need a Scroll bar for GWT CellTable. The following is my ui.xml,

<gwt:SplitLayoutPanel>
  <gwt:west size="200">
    <gwt:VerticalPanel>
     <gwt:HTMLPanel>
         <table>
            <tr>
               <td>
                  <gwt:Label>xxxx</gwt:Label>
               </td>
            </tr>
            <tr>
               <td>
                 **Here i need a CellTable with Vertical Scrollbar**
               </td>
            </tr>
         </table>
     </gwt:HTMLPanel>
  </gwt:VerticalPanel>
</gwt:west>
<gwt:center>
   <gwt:VerticalPanel />
</gwt:center>
</gwt:SplitLayoutPanel>

I tried with ScrollPanel --> VerticalPanel --> CellTable. But i'm not getting ScrollBar. Can anyone help me?

Thanks in advance, Gnik

3
gwtgwt2
Does you scroll panel have a fixed size? (a size forced by itself or given by its container). Because if it's not restricted it will be the same size of its content and no scroll will work (I'm almost sure) - helios
I set ScrollPanel height="100%" and width="100%". as well as for the VerticalPanel. cellTable.setSize("100%", "100%"); Is it correct or not? - Rajaa
I think the celltable using 100% is exactly fitted into the scroll panel. Try (for test purposes only) setting "800px" to the celltable to see if scroll bars appear :) - helios

3 Answers

4
votes

What's the point in using of the VerticalPanel in this situation? Replace it by the ScrollPanel in your UiBinder xml-file. Set the width and the height in pixels for this ScrollPanel(this is very important!) and put in it your CellTable:

<g:ScroollPanel pixelSize="200, 400">
   <c:CellTable ui:field="myCellList" />
</g:ScroollPanel>

200 - the width of panel in pixels, 400 - height.

At that the size of the CellTable list must necessarily larger than the size of ScrollPanel. Otherwise, a scroll does not appear.

Or set the width in 100% if you need a vertical scrolling:

<g:ScrollPanel  width="100%" height ="400px">
2
votes

If you are using Gwt 2.4, then replacing the CellTable Object with a DataGrid Object will give you the needed result with no need for a Scrollapanel. You can see the difference between the celltable and the datagrid in the gwt Showcase (under cell widgets).

0
votes

The below code worked for me - 

        <g:HTMLPanel>
    <g:VerticalPanel>
    <g:TabLayoutPanel barHeight="2" barUnit="EM" width="790px"
            height="500px">
            <g:tab>
                <g:header>Sample</g:header>
                <g:DockLayoutPanel>
                    <g:center>
                        <g:ScrollPanel>
                            <p1:CellTable ui:field="cellSampleTable" />
                        </g:ScrollPanel>                            
                    </g:center>                     
                </g:DockLayoutPanel>
            </g:tab>
            </g:TabLayoutPanel>
    </g:VerticalPanel>
</g:HTMLPanel>