GWT Datagrid does not show data , but contains it

Question

I'm trying to convert a cellTable into adatagrid, because I want to add a search handler later and therefor I need fixed column headers. At the moment I extend the celltable/datagrid class and put the widget into a simplelayoutpanel and add this to my tabpanel.

If I use the celltable, all works fine and the data shows up. If I change the type of the class to datagrid, the data shows sometimes up (The column names are always there). To add something to the table I used setRowData or a dataProvider. If I set breakpoints to delay the loading of the table content, the table does sometimes contain data. If I later call the redraw method for the table, the table shows the correct information. But the table should load automatically the content. At other "positions" of my project I used the datagrid also and it worked in Dialogboxes.

I think there must be a bug with the drawing of the items, because if I call .getRowCount on the table or the deprecated .getDisplayedItems, it returns me the correct number of items which should be in the table. Also if I add a selection model to the table and select a item, the item contains valid data.

Bashemath

Answer 1

DataGrid requires to be put in a LayoutPanel or Panel that implements the ProvidesResize interface to be visible. ScrollPanel implements that interface.

Furthermore this chain of LayoutPanels from your DataGrid up to your root element/panel has to be unbroken. That seems to be the case in your panel hierarchy.

Finally you have to use the RootLayoutPanel instead of the RootPanel to add your LayoutPanels. So did you make sure that you add your SimpleLayoutPanel to the RootLayoutPanel ?

Also refer to this GWT: DataGrid - set height 100% not rendering properly

Moving

First i add with RootPanel.get("...").add(tabPanel); a tabpanel to the page. The tab which should show the datagrid is a HorizonalPanel. Then i create my datagrid, add it to a ResizeLayoutPanel, set the size and add it to the horizontal panel. The header of the datagrid is there, but it stays empty. Still works if the type of my table is a celltable. – Bashemath

You are using dataGrid, tabPanel and RootPanel which doesnot implement ProvidesResize interface. Make a class which extends simpleLayoutPaneland has DataGrid. Use TabLayoutPanel and RootLayoutPanel instead of tabPanel and RootPanel. Never use horizontal or vertical panel as containers for you dataGrid when you are working with Layout Panels. You can look at the GWT showcase source code of gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid I mean source code i.e., CwDataGrid.java, ContentWidget.java and others. – Moving

There are actually two gwt interfaces declaring this interdependency: ProvidesResize and RequiresResize! google-web-toolkit.googlecode.com/svn/javadoc/2.5/com/google/… – Ln

Answer 2

Here are my 2 cents.

When it comes to render a DataGrid outside of a properly formed "LayoutPanel or Panel that implements the ProvidesResize" tree structure, I found out I always need to keep the following in mind:

1. As this question explains, the height DataGrid property needs an explicit value, for example, "123px". Without this, DataGrid does not show its data rows (even if they are in the DOM).

2. If put a DataGrid inside an unfocused DecoratedTabPanel tab, DataGrid.redraw() needs to be called when such tab gets focus . Again, without this, DataGrid does not show its data rows (even if they are in the DOM).

I hope this helps.

Stationery

About 2: IE10 does not exhibit this behavior, no need to redraw. – Hawking

@Lucas I was struggling to display the data using DataGrid. After explicitly setting the dataGrid.setHeight("123px") it worked. Could you please tell me why is that number 123px? any significance? Because i tried multiple ways of setting height and width and nothing seems working. – Impudicity

Madhu: no significance, just a sample value. – Stationery

Answer 3

In my case it was caused by this: DataGrid rows not visible in second tab of TabLayoutPanel

Aguilera