GWT CellTable with UiBinder not working

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.