GWT CellList Horizontal - gwt

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.

Answer 3

There is a lot of logic in that method I didn't want to reproduce, but my hacky solution of just replacing all div's with span's worked:
public class HorizontalCellList<T> extends CellList<T> {
public HorizontalCellList(Cell<T> cell) {
super(cell);
}
#Override
protected void renderRowValues(
SafeHtmlBuilder sb, List<T> values, int start, SelectionModel<? super T> selectionModel) {
SafeHtmlBuilder filteredSB = new SafeHtmlBuilder();
super.renderRowValues(filteredSB, values, start, selectionModel);
SafeHtml safeHtml = filteredSB.toSafeHtml();
String filtered = safeHtml.asString().replaceAll("<div", "<span").replaceAll("div>","span>");
sb.append(SafeHtmlUtils.fromTrustedString(filtered));
}
}

Answer 4

A variant with CSS - set CSS class name on you cell list
CellList<T> list = new CellList<T>(...);
list.addStyleName('myList');
then apply CSS rule to the cells to make them align horizontally:
.myList > div > div > div {
display: inline;
}

Answer 5

I'm able to solve this by extending CellList and creating my own template + overriding the renderRowValues method. Simply changing divs into spans didn't do the trick for me maybe it was because I have custom cells (each cell is rendered as table). Adding display:inline on the CSS didn't work for me also.
My template code is pretty much the same as the original except I added the "float:left;" style:
interface Template extends SafeHtmlTemplates {
#Template("<div onclick=\"\" __idx=\"{0}\" style=\"float:left;\">{1}</div>")
SafeHtml span(int idx, SafeHtml cellContents); ...
Here's a snippet of my renderRowValue method:
int length = values.size();
int end = start + length;
for (int i = start; i < end; i++) {
SingleKeyValueModel value = values.get(i - start);
//super.renderRowValues(sb, values, start, selectionModel);
SafeHtmlBuilder cellBuilder = new SafeHtmlBuilder();
Context context = new Context(i, 0, getValueKey(value));
cell.render(context, value, cellBuilder);
sb.append(TEMPLATE.span(i, cellBuilder.toSafeHtml()));
}