GWT CellTable with UiBinder not working - gwt

Question

I am trying to render a Celltable with UiBinder but I only get a blank screen.
Here is my code:
VDataGrid.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:c="urn:import:com.google.gwt.user.cellview.client">
<ui:style>
.cellTable {
border-bottom: 1px solid #ccc;
text-align: left;
margin-bottom: 4px;
}
</ui:style>
<g:HTMLPanel>
<table cellspacing='0' cellpadding='0' style='width:100%;'>
<tr>
<td valign='top'>
<c:CellTable addStyleNames='{style.cellTable}'
pageSize='15' ui:field='cellTable' />
</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
VDataGrid.java
public class VDataGrid extends ResizeComposite {
interface Binder extends UiBinder<Widget, VDataGrid> {
}
interface SelectionStyle extends CssResource {
String selectedRow();
}
private static final Binder binder = GWT.create(Binder.class);
#UiField(provided = true)
CellTable<Contact> cellTable;
public VDataGrid() {
initWidget(binder.createAndBindUi(this));
TextColumn<Contact> nameColumn = new TextColumn<Contact>() {
#Override
public String getValue(Contact object) {
return object.name;
}
};
cellTable.addColumn(nameColumn, "Name");
DateCell dateCell = new DateCell();
Column<Contact, Date> dateColumn = new Column<Contact, Date>(dateCell) {
#Override
public Date getValue(Contact object) {
return object.birthday;
}
};
cellTable.addColumn(dateColumn, "Date");
TextColumn<Contact> addressColumn = new TextColumn<Contact>() {
#Override
public String getValue(Contact object) {
return object.address;
}
};
cellTable.addColumn(addressColumn, "Address");
final ListDataProvider<Contact> dataProvider = new ListDataProvider<Contact>();
// Connect the table to the data provider.
dataProvider.addDataDisplay(cellTable);
// Add the data to the data provider, which automatically pushes it to
// the
// widget.
List<Contact> list = dataProvider.getList();
for (Contact contact : CONTACTS) {
list.add(contact);
}
}
And here is the code for the class using the above
DataGrid.ui.xml
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:grid='urn:import:com.grid.client'>
<g:DockLayoutPanel unit='EM'>
<g:center>
<g:ScrollPanel>
<grid:VDataGrid ui:field='grid' />
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>
Entrypoint class : DataGrid.java
public class DataGrid implements EntryPoint {
interface Binder extends UiBinder<DockLayoutPanel, DataGrid> { }
private static final Binder binder = GWT.create(Binder.class);
#UiField VDataGrid grid;
#Override
public void onModuleLoad() {
// Create the UI defined in Mail.ui.xml.
DockLayoutPanel outer = binder.createAndBindUi(this);
Window.enableScrolling(false);
Window.setMargin("0px");
RootLayoutPanel root = RootLayoutPanel.get();
root.add(outer);
}
}
I only see a blank screen. Appreciate some insights into this.

Answer 1

Most of the time, if you don't see your CellTable, it's because it has a height of zero.
You put your CellTable in the HTMLPanel. Neither HTMLPanel, nor CellTable implement ProvidesResize and/or RequireResize interfaces, which means that their height has to be set explicitly - they won't get it from their parent widgets.
Also, there is no need to put CellTable inside the table tag - it serves no purpose. In fact, you don't need to put it inside the HTMLPanel either.