GWT CellList Horizontal

Question

Does anybody know how to make a CellList oriented horizontally? If possible, please with UiBinder, but this is not necessary.

Answer 1

Following Thomas Broyer's suggestion on the google-web-toolkit group, and How to style GWT CellList?, we can inject a new CSS resource into the CellList constructor.

The CSS for getting the horizonltal formatting MyCellList.css:

/* This file is based on the CSS for a GWT CellList:
 * https://gwt.googlesource.com/gwt/+/master/./user/src/com/google/gwt/user/cellview/client/CellList.css
 * The primary purpose is to arrange for the <div> elements that contain each cell to be laid out inline (horizontally).
 */

/* Using inline-block, following Thomas Broyer's recommendations (with link to justification) here:
 * https://groups.google.com/forum/#!topic/google-web-toolkit/rPfCO5H91Rk
 */
.cellListEvenItem {
    display: inline-block;
    padding: 5px;
}

.cellListOddItem {
    display: inline-block;
    padding: 5px;
}

Define a new Resource like this:

public interface MyCellListResource extends CellList.Resources {
  public static MyCellListResource INSTANCE = GWT.create(MyCellListResource.class);
  interface MyCellListStyle extends CellList.Style {}

  @Override
  @Source({CellList.Style.DEFAULT_CSS, "MyCellList.css"})
  MyCellListStyle cellListStyle();
}

Inject the new style, and pass it CellList's constructor:

    MyCellListResource.INSTANCE.cellListStyle().ensureInjected();

    CellList<Fare> cellList = new CellList<Fare>(cell, MyCellListResource.INSTANCE);

Note that the new style appears in the cascade after the DEFAULT style for CellList, so you need only put the modifications you require into your MyCellList.css.

Answer 2

Try to override the CellList.renderRowValues method. You have to be able to create a horizontal presentation template.