Trying to get GWT DataGrid to work in UiBinder

Question

I am trying to get the hang of UI Binder in GWT.

So far, I have a basic application to display a DataGrid with some sample data, and it can be easily switched between traditional GWT and UIBinder. It works correctly in traditional GWT but not in UiBinder.

Here's the main EntryPoint class:

public class Main implements EntryPoint {

  public void onModuleLoad() {

        uiBinder(); //call either uiBinder() or gwt() here
  }

  /* Use UiBinder to display grid */
  public void uiBinder() {
        HelloWorld hello = new HelloWorld();
        RootPanel.get("myid").add(hello);
  }

  /* Use traditional GWT to display grid */
  public void gwt() {
        DataGrid<Contact> grid = new DataGrid<Contact>();
        GridInitializer.init(grid);
        RootLayoutPanel.get().add(grid);
  }

}

Here's the HelloWorld.java used by UiBinder:

public class HelloWorld extends Composite {

  interface MyUiBinder extends UiBinder<Widget, HelloWorld> {}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField DataGrid<Contact> grid;

  public HelloWorld() {            
        GridInitializer.init(grid);
        initWidget(uiBinder.createAndBindUi(this));
  }
}

The GridInitializer class sets up grid columns and sample data. I there's nothing wrong there because it renders correctly if I use traditional GWT.

Here is HelloWorld.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">

  <g:DockLayoutPanel unit="EM">
    <g:center>
      <c:DataGrid ui:field='grid' />
    </g:center>
  </g:DockLayoutPanel>

</ui:UiBinder>

If I use UI Binder, nothing displays at all. I'm at a loss. Any suggestions?

Answer 1

DataGrid (a RequireSize widget) must be added on (must be a child of) ProvidesResize panels/widgets or it must be explicitly sized.

So, you have to set the size of the DataGrid or its parent component. Also, it requires your application to use RootLayoutPanel.

Answer 2

have you tried swapping these two lines around?

GridInitializer.init(grid);
initWidget(uiBinder.createAndBindUi(this));

to

initWidget(uiBinder.createAndBindUi(this));
GridInitializer.init(grid);

The initWidget creates the grid. See http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html#Hello_World

Also, you're adding it to the RootPanel not RootLayoutPanel in your uiBinder() method. Are you sure myid exists? DockLayoutPanel is a bit overkill, use LayoutPanel.