Question

I am trying to create a grid that fills the width of a ContentPanel. The grid should have two columns of equal size that span the entire width of the grid. Resizing the browser window should update the grid size accordingly. I would expect the code below to accomplish this, but the grid does not grow on browser resize and there is a ~15px gap between the second column and the right edge of the grid.

Any ideas?

public class MyGrid extends ContentPanel {

@Override
protected void onRender(Element parent, int index) {
    super.onRender(parent, index);

    setLayout(new FillLayout());
    ColumnConfig c1 = new ColumnConfig("value","value", 50);
    ColumnConfig c2 = new ColumnConfig("value1","value1", 50);
    ListStore<ModelData> store = new ListStore<ModelData>();
    for (int i=0; i<10; i++) {
      BaseModelData data = new BaseModelData();
      data.set("value", "value");
      data.set("value1", "value1");
      store.add(data);
    }
    Grid<ModelData> grid = new Grid<ModelData>(store, new ColumnModel(Arrays.asList(new ColumnConfig[] {c1, c2})));
    grid.setAutoHeight(true);
    grid.setAutoWidth(true);
    grid.getView().setAutoFill(true);
    add(grid); 
}

}

Answer 1

The cause of the extra space on the right of the table is grid.setAutoHeight(). Remove this and it will be gone. Getting the table to resize with the browser seems to require the use of a Viewport (I dont understand why the ContentPanel would grow without the grid in the code above). This code accomplishes what I was trying to do:

public class MyGrid extends Viewport {

  @Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);

    setLayout(new FitLayout());
    ColumnConfig c1 = new ColumnConfig("value","value", 50);
    ColumnConfig c2 = new ColumnConfig("value1","value1", 50);
    ListStore<ModelData> store = new ListStore<ModelData>();
    for (int i=0; i<10; i++) {
      BaseModelData data = new BaseModelData();
      data.set("value", "value");
      data.set("value1", "value1");
      store.add(data);
    }
    final Grid<ModelData> grid = new Grid<ModelData>(store, new ColumnModel(Arrays.asList(new ColumnConfig[] {c1, c2})));
    grid.getView().setAutoFill(true);
    ContentPanel panel = new ContentPanel();
    panel.setLayout(new FitLayout());
    panel.add(grid);
    add(panel);
  }
}