GWT data grid isn't presented

datagrid, gwt, java

Solution

Yes, `CellTable` did work with 100% height and width. However the ''DataGrid'' doesn't. You need to set an explicit width/height. Alternatively you can put your ''DataGrid'' in a ''LayoutPanel'' that implements the ProvidesResize interface (i.e. SimpleLayoutPanel). The benefit of using a LayoutPanel is that the Datagrid is automatically resized when you resize your browser window.

Problem

I'm trying to switch from CellTable to DataGrid. The actual change was very easy (APIs are the quite the same) - but I cannot get the grid to be visible without setting explicitly its width and height. In the CellTable it was enough to set width and height to 100% - and that is the behavior I want. In my view I have two sections in HotrizontalPanel: one shows some tabs (buttons) and the other shows the grid. Each time a tab is clicked, the grid area is cleared and a new grid is created. The view looks like this: ``` <ui:style> .expanded { width: 100%; height: 100%; } .simpleContainer { border-top: 5px solid #484848; border-bottom: 5px solid #484848; } </ui:style> <c:SimpleContainer addStyleNames="{style.simpleContainer} SimpleContainer"> <g:HorizontalPanel> <g:HorizontalPanel ui:field="headersContainer"/> <g:FlowPanel ui:field="tablePanel" styleName="{style.expanded}"/> </g:HorizontalPanel> </c:SimpleContainer> ``` And this is the snap of HTML from the running application: ``` <div class="GKQJTVMDCNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-simpleContainer SimpleContainer" id="x-widget-21" style="width: 1730px; height: 126px; "> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="left" style="vertical-align: top; ">....</td> <td align="left" style="vertical-align: top; "> <div class="GKQJTVMDBNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-expanded"> <div style="position: relative; overflow-x: hidden; overflow-y: hidden; " __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true"> .... </div> </div> </td> </tr> </tbody> </table> ``` The upper div has the right width and height, but somehow the DataGrid div has 1px height and 0px width (at list according to the chrome developer tool) ``` <div class="GKQJTVMDBNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-expanded"> ``` Any idea?

Original source