GWT FlowPanel not adding widget

Question

I have a class that extends FlowPanel. I add a DataGrid widget and a Grid widget like this:

dataGrid.setWidth("100%");
dataGrid.setHeight("100%");

grid.setWidth("100%");
grid.setHeight("100%");

this.add(dataGrid);
this.add(grid);

this.setWidth("100%");
this.setHeight("100%");

Only the DataGrid widget appears. I've tried both switching from FlowPanel to VerticalPanel and wrapping the Grid in a FlowPanel, with no joy. I tried putting the DataGrid and the Grid into a 2 row, 1 column Grid and that didn't display anything. This is GWT 2.6.0 on Safari.

I suspect that I have a misunderstanding of what setHeight() and setWidth() are doing in this case, but I'm not sure. Is there any way to see what GWT thinks it's doing in terms of layout?

Thanks.

Andrei Volgin · Accepted Answer · 2015-05-14T22:06:42.290

You tell DataGrid to take all available space inside the FlowPanel. Then you tell Grid widget to do the same. The result is that your Grid has a height of zero, since there was no space left for it after the DataGrid took 100% of the FlowPanel height.

You either have to use "50%" for heights, or make your DataGrid fixed size ("100px") and then tell the Grid to take the rest. The easiest way to achieve that is to use a LayoutPanel, and then, for example:

layoutPanel.setWidgetTopHeight(dataGrid, 0, Unit.PX, 100, Unit.PX);
layoutPanel.setWidgetTopBottom(grid, 100, Unit.PX, 0, Unit.PX);

EDIT:

This is the code that I use to resize the DataGrid:

public void resize(final boolean addHeader, final boolean addFooter) {
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {

        @Override
        public void execute() {
            // 37 is the height of header and footer based on my CSS
            int height = addHeader ? 37 : 0;
            if (addFooter) {
                height += 37;
            }
            for (int i = 0; i < getRowCount(); i++) {
                height += getRowElement(i).getOffsetHeight();
            }
            setHeight(height + "px");
        }
    });
}

If you use this approach, simply add your DataGrid to the FlowPanel, and then add your Grid to the FlowPanel. Call resize() on the DataGrid, and do not set any height or width on your DataGrid or Grid.

For a finer control look at the flex-box layout model. It is supported in all modern browsers.

Thanks, setting each height to 50% made both widgets appear. Is there any way in GWT to have the framework do the work? I want the DataGrid to take as much space as it needs to display its headers and 10 rows and I want the Grid to take as much space as it needs to show its contents. The FlowPanel should order the layout and take as much space as its contents need. Setting percentages and counting pixels seems a bit primitive. — Patrick, May 14 '15 at 15:38
I appreciate the code. That magic value of 37 bothers me, though. My expectation is that GWT should take care of the sizing for me. I just want to add widgets to the panel and have them take up whatever space they need. I thought that a FlowPanel would do exactly that, but when I don't specify the height, all I see is the second widget I added (the grid in this case). That suggests to me that it is defaulting to 100% which doesn't make sense. Is there no way to do this without explicit sizing? — Patrick, May 14 '15 at 19:23
Consider using CellTable instead of DataGrid. CellTable does not implement RequiesResize interface. — Andrei Volgin, May 14 '15 at 22:03

score 1 · Answer 2 · answered May 15 '15 at 11:31

@Patrick, regarding your comment, I use DockLayoutPanel to take care of resizing for me:

DockLayoutPanel gridPanel = new DockLayoutPanel(Unit.PCT);
gridPanel.addNorth(dataGrid, 60);  //datagrid will take 60% of the panel
gridPanel.add(grid);  //grid will take the remaining space

GWT FlowPanel not adding widget

2 Answers2