CODEWITHSUNDEEP
cssgwtdatagridflowpanel
Patrick
Patrick

Reputation: 362

GWT FlowPanel not adding widget

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.

Upvotes: 0

Views: 374

Answers (2)

EddieV
EddieV

Reputation: 21

@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

Upvotes: 1

Andrei Volgin
Andrei Volgin

Reputation: 41089

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.

Upvotes: 2

Related Questions