GWT DataGrid does not display, CellTable does

0
votes

Overview

I have an application that consists of a SplitLayoutPanel that has a StackLayoutPanel with two menu selections on the left and a DeckLayoutPanel on the right. The DeckLayoutPanel has two subpanels, one a SimpleLayoutPanel containing a Label and one a DockLayoutPanel containing a Label and another SimpleLayoutPanel. The last SimpleLayoutPanel contains a DataGrid.

SplitLayoutPanel (TestUI) | + StackLayoutPanel | | | + CellList (Profile) | | | + CellList (Admin) | + DeckLayoutPanel | + SimpleLayoutPanel | | | + Label | + DockLayoutPanel (BudgetPanel) | + Label | + SimpleLayoutPanel (LedgerPanel) | + DataGrid

All subpanels have their height and width set to 100% by their containing panels.

Expected Behavior

The expected behavior is that clicking on the "Budget" menu item in the StackLayoutPanel will show the BudgetPanel, including the LedgerPanel's DataGrid.

Observed Behavior

When the "Budget" menu item is clicked, the DockLayoutPanel is displayed, with its header Label, the DataGrid column headers are displayed, but the DataGrid rows do not appear.

When a Label is added to the south area of the DockLayoutPanel, the application compiles but nothing is displayed, not even the top level StackLayoutPanel.

When the DataGrid is replaced with a CellTable, the data is displayed (although the height of each row is much more than necessary to hold the data).

Questions

What needs to be done to get the DataGrid to display as expected?

How can the rows be styled to have a smaller height?

Source Code

The full source code demonstrating this problem is available on GitHub.

2
javagwtdatagrid
This could be due this bug. For example DeckLayoutPanel is used internally by TabLayoutPanel and you have to explictily call redraw on your DataGrid. You can try to replace the DeckLayoutPanel with a SimpleLayoutPanel` and check if it works. – Ümit

2 Answers

1
votes

I've looked really fast at your code, and from what I saw, you've set a height of 100% for your datagrid. Unfortunately in GWT, you have to put a fixed value for your datagrid. 

datagrid.setHeight("300px");

You can do a workaround by dynamically changing the height of your datagrid.

Window.addResizeHandler(new ResizeHandler() {
      @Override
      public void onResize(ResizeEvent event) {
        datagrid.setHeight(Window.getClientHeight() - menuSize);
      }
    });
0
votes

I got the answer from Thomas Broyer on the GWT mailing list. The trick is to call forceLayout() on the BudgetPanel instance when it is shown in its containing DeckLayoutPanel.

Thanks for all the suggestions.