Question

The GWT showcase, as well as many examples I found, there is always a very simple usage of the DataGrid:

1. You define DataGrid element in your UIBinder, and you set it’s field to be provided.
2. In the view constructor you initialize the grid – define columns and add data
3. UI binder is generated
4. Everything it presented as expected..

But the common case is not so static: you usually set up the grid but don’t have the data, which may be provided only after the user is doing something (clicking a button, etc).

It took me quite a lot of time to present the DataGrid in my complex UI layout 😐
For doing that, the grid is now hosted in SimpleLayoutPanel which has 100% width and height, and this SimpleLayoutPanel is inside some docking panel.
But for reason I don’t understand – the grid is displayed beyond the docking panel size, so I can never see the bottom end of its scroll bar.

This is my UI binder (removed some stuff for clarity):

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>

.sidePadding {
    padding-left: 8px;
        padding-right: 8px;
 }

    .expanded {
    width: 100%;
    height: 100%;
}


<g:DockLayoutPanel unit="PX" styleName="{style.expanded}">
    <g:north size="45">
        ...
    </g:north>
    <g:center>
    </g:center>
        ...
    <g:east size="190">
        <g:FlowPanel styleName="{style.sidePadding}">
            <g:FlowPanel>
                <g:Label>SOME TOOLBAR</g:Label>
            </g:FlowPanel>
            <g:HTMLPanel>
                <g:Label>SOME PANEL PANEL </g:Label>
            </g:HTMLPanel>
            <g:FlowPanel ui:field="eastContent">
                <g:Label>SOME FLOW PANEL</g:Label>
            </g:FlowPanel>
            <g:SimpleLayoutPanel ui:field="imagesGrid" addStyleNames="{style.expanded}"/>
        </g:FlowPanel>
    </g:east>
</g:DockLayoutPanel>

</ui:UiBinder>

As it turns out – the east panel gets a height of 650px, which is the correct value, but also the DataGrid inside the SimpleLayoutPanel gets the same height! and because there are some labels etc. before it – it overflow the size of the east panel..

Any help???

UPDATE:
It seems that if I remove everything from the east-panel and leave only the SimpleLayoutPanel of the DataGrid – it works find!
But I do need to add all those extra labels above the grid – and I can’t find a solution.
??

Answer 1

See https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

Layout panels (RequiresResize widgets) have to be nested into other layout panels (ProvidesResize widgets) all the way up to either the RootLayoutPanel, a ResizePanel or a layout panel with an explicit and fixed size (i.e. not fuild, e.g. not given in percentage of the parent panel, but rather in pixels).

Here, your FlowPanel between the DockLayoutPanel and SimpleLayoutPanel breaks the hierarchy.

You might want to trade the FlowPanel with a HeaderPanel, putting all the FlowPanels in the header (in a container FlowPanel) and your SimpleLayoutPanel (or your Datagrid) as the content.
despite not implementing ProvidesResize, HeaderPanel respects this contract but for its content child only (that’s the crux of it: size the content child depending on the HeaderPanel‘s size and the intrinsic size of the header and footer)