WordWrapGridExample

WordWrapColumnHeader.java

import com.google.gwt.dom.client.AnchorElement;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;
import com.google.gwt.dom.client.Style;
import com.google.gwt.dom.client.Style.BorderStyle;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.Event;
import com.sencha.gxt.core.client.GXT;
import com.sencha.gxt.core.client.Style.Side;
import com.sencha.gxt.core.client.dom.XElement;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnHeader;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.grid.HeaderGroupConfig;

/**
 * A {@link Grid} {@link ColumnHeader} that supports word wrap, enabling long column headings to be displayed in
 * multiple rows. Provides options for letting the height of the header default to the height of the tallest heading, or
 * to be manually set to a specific pixel value.
 * <p />
 * In order for a heading to word wrap, the heading must be set to HTML that enables word wrap, e.g.
 * <code>&lt;span style='white-space: normal;'&gt;A very long heading&lt;/span&gt;</code>.
 */
public class WordWrapColumnHeader<M> extends ColumnHeader<M> {

  protected class GroupExt extends ColumnHeader<M>.Group {

    public GroupExt(HeaderGroupConfig config) {
      super(config);

      // vertical align
      getElement().getStyle().setProperty("display", "table-cell");
    }

    @Override
    protected void doAttachChildren() {
      super.doAttachChildren();

      sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.FOCUSEVENTS | Event.ONKEYPRESS | Event.ONCONTEXTMENU
          | Event.ONDBLCLICK);
    }

    @Override
    public void onBrowserEvent(Event event) {
      super.onBrowserEvent(event);

      // Get ID
      XElement tdElement = event.getEventTarget().cast();
      // walk up to the TD
      while (!tdElement.getTagName().toLowerCase().equals("td")) {
        tdElement = tdElement.getParentElement().cast();
      }
      // find the element with id
      NodeList<Element> foundSpans = tdElement.select("span[@data-col]");
      String id = null;
      if (foundSpans != null && foundSpans.getLength() > 0) {
        XElement span = foundSpans.getItem(0).cast();
        if (span != null) {
          id = span.getAttribute("data-col");
        }
      }

      int type = event.getTypeInt();
      switch (type) {
        case Event.ONMOUSEOVER:
          mouseOver(event, id);
          break;
        case Event.ONMOUSEOUT:
          mouseOut(event, id);
          break;
        case Event.ONMOUSEMOVE:
          mouseMove(event, id);
          break;
        case Event.ONMOUSEDOWN:
          mouseDown(event, id);
          break;
        case Event.ONCLICK:
          click(event, id);
          break;
        case Event.ONDBLCLICK:
          doubleClick(event, id);
          break;
        case Event.ONCONTEXTMENU:
          rightClick(event, id);
          break;
      }
    }

    private void rightClick(Event event, String id) {
      System.out.println("right click ID=" + id);
    }

    private void doubleClick(Event event, String id) {
      System.out.println("double click ID=" + id);
    }

    private void click(Event event, String id) {
      System.out.println("click ID=" + id);
    }

    private void mouseDown(Event event, String id) {
      System.out.println("mouse down ID=" + id);
    }

    private void mouseMove(Event event, String id) {

    }

    private void mouseOut(Event event, String id) {

    }

    private void mouseOver(Event event, String id) {
      // System.out.println("mouse over ID=" + id);
    }
  }

  protected class WordWrapHead extends ColumnHeader<M>.Head {

    @SuppressWarnings({"rawtypes"})
    public WordWrapHead(ColumnConfig column) {
      super(column);
      getElement().getStyle().setFloat(Style.Float.NONE);

      // ~~~~~~ workaround for vertical aligning to center, middle
      getElement().getStyle().setProperty("display", "table-cell");
      getElement().getStyle().setHeight(100, Unit.PCT);
      getElement().getStyle().setProperty("textAlign", "center");

      // ~~~~ See getRightAlignOffset(), sets padding right

      // for debugging
      // getElement().getStyle().setBackgroundColor("red");

      // add events to observe
      sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.FOCUSEVENTS | Event.ONKEYPRESS | Event.ONCONTEXTMENU
          | Event.ONDBLCLICK);
    }

    // use the handler or event
    @Override
    public void onBrowserEvent(Event event) {
      super.onBrowserEvent(event);

      // Get ID
      XElement tdElement = event.getEventTarget().cast();
      // walk up to the TD
      while (!tdElement.getTagName().toLowerCase().equals("td")) {
        tdElement = tdElement.getParentElement().cast();
      }
      // find the element with id
      NodeList<Element> foundSpans = tdElement.select("span[@data-col]");
      String id = null;
      if (foundSpans != null && foundSpans.getLength() > 0) {
        XElement span = foundSpans.getItem(0).cast();
        if (span != null) {
          id = span.getAttribute("data-col");
        }
      }

      int type = event.getTypeInt();
      switch (type) {
        case Event.ONMOUSEOVER:
          mouseOver(event, id);
          break;
        case Event.ONMOUSEOUT:
          mouseOut(event, id);
          break;
        case Event.ONMOUSEMOVE:
          mouseMove(event, id);
          break;
        case Event.ONMOUSEDOWN:
          mouseDown(event, column, id);
          break;
        case Event.ONCLICK:
          click(event, id);
          break;
        case Event.ONDBLCLICK:
          doubleClick(event, id);
          break;
        case Event.ONCONTEXTMENU:
          rightClick(event, id);
          break;
      }
    }

    private void rightClick(Event event, String id) {
      System.out.println("rightClick colum=" + column + " ID=" + id);
    }

    private void doubleClick(Event event, String id) {
      System.out.println("doubleClick colum=" + column + " ID=" + id);
    }

    private void click(Event event, String id) {
      System.out.println("click colum=" + column + " ID=" + id);
    }

    private void mouseDown(Event event, int column, String id) {
      // System.out.println("mouseDown colum=" + column);
    }

    private void mouseMove(Event event, String id) {
      // System.out.println("mouseMove colum=" + column);
    }

    private void mouseOut(Event event, String id) {
      // remove border
      XElement target = event.getEventTarget().cast();
      XElement tdEl = target.findParent("td", 4);
      tdEl.getStyle().setProperty("border", "");
    }

    private void mouseOver(Event event, String id) {
      System.out.println(" ID=" + id);

      // add color border
      XElement target = event.getEventTarget().cast();
      XElement tdEl = target.findParent("td", 4);
      tdEl.getStyle().setBorderColor("red");
      tdEl.getStyle().setBorderStyle(BorderStyle.SOLID);
      tdEl.getStyle().setBorderWidth(1, Unit.PX);
    }

    // ~~~~~ One of the other workarounds for overriding the height
    @Override
    public void updateWidth(int width) {
      if (!config.isHidden()) {
        XElement td = getElement().findParent("td", 3);

        int adj = td.getFrameWidth(Side.LEFT, Side.RIGHT);
        int newWidth = width - adj;

        // EXTGWT-3511 The setWidth call is not working as the framing is greater than the specified column
        // width in
        // some cases causing the overall width to be < 0
        if (!getElement().isBorderBox()) {
          newWidth -= getElement().getFrameWidth(Side.LEFT, Side.RIGHT);
          newWidth = Math.max(1, newWidth);
        }

        getElement().setWidth(newWidth, false);

        Element th = getTableHeaderJsni(WordWrapColumnHeader.this, column);
        th.getStyle().setWidth(width, Unit.PX);

        String tdHeight = td.getStyle().getHeight();

        if (tdHeight.equals("")) {
          int h = overrideHeaderHeight != -1 ? overrideHeaderHeight : td.getHeight(true);
          // ~~~~~ added override height, this will override the height for following columns
          if (overrideHeaderHeight < 0) {
            overrideHeaderHeight = h;
            System.out.println("\t\t~~~~ overrideHeaderHeight=" + overrideHeaderHeight);
          }

          h -= WordWrapColumnHeader.this.getElement().<XElement> cast().getBorders(Side.TOP, Side.BOTTOM);
          td.setHeight(h);
          
          getElement().setHeight(h, true);

          AnchorElement btn = getBtn(this);
          if (btn != null) {
            XElement.as(btn).setHeight(h, true);
          }
        }
      }
    }
    
    private native void setHeader(ColumnHeader<M> header) /*-{
      this.@com.sencha.gxt.widget.core.client.grid.GridView::header = header;
    }-*/;

    private native Element getTableHeaderJsni(ColumnHeader<M> header, int columnIndex) /*-{
      return header.@com.sencha.gxt.widget.core.client.grid.ColumnHeader::getTableHeader(I)(columnIndex);
    }-*/;

    private native AnchorElement getBtn(ColumnHeader<M>.Head head) /*-{
      return head.@com.sencha.gxt.widget.core.client.grid.ColumnHeader.Head::btn;
    }-*/;

  }

  // ~~~~~~ get rid of the right padding
  @Override
  public int getRightAlignOffset() {
    return 0;
  }

  private int fixedHeight = -1;

  /**
   * Constructs a new word wrap column header for the specified grid and column model. To configure the grid to use the
   * new word wrap column header, invoke {@link GridView#setColumnHeader(ColumnHeader)}, e.g.
   * <code>grid.getView().setColumnHeader(new WordWrapColumnHeader&lt;T&gt;(g, cm)</code>.
   * 
   * @param container - the grid that contains this word wrap column header
   * @param cm - the column model that provides the configuration for this column header
   */
  public WordWrapColumnHeader(Grid<M> container, ColumnModel<M> cm) {
    super(container, cm);
  }

  /**
   * Sets the height of the word wrap column header to a specific value. Generally this is not required as the column
   * header sizes itself to the height of the tallest heading. However, there are some use cases where the column header
   * height must be set (e.g. linked grids displayed side-by-side, where the column header height of one grid must match
   * that of the other).
   * 
   * @param newHeight the height of the column header, or -1 to resize the header to the height of it's tallest heading
   *          (i.e. it's "natural" height)
   */
  @Override
  public void setHeight(int newHeight) {
    if (GXT.isIE()) {
      getElement().getOffsetParent().setScrollTop(0);
    }

    // Do not forward to base class... the parent element must remain unsized
    fixedHeight = newHeight;
    if (newHeight == -1) {
      setNaturalHeight();
    } else {
      setFixedHeight(newHeight);
    }
    super.checkHeaderSizeChange();
  }

  @Override
  protected void checkHeaderSizeChange() {
    onHeaderSizeChange();
    super.checkHeaderSizeChange();
  }

  @Override
  @SuppressWarnings("rawtypes")
  protected Head createNewHead(ColumnConfig config) {
    WordWrapHead head = new WordWrapHead(config);
    return head;
  }

  @Override
  protected ColumnHeader<M>.Group createNewGroup(HeaderGroupConfig config) {
    GroupExt group = new GroupExt(config);
    return group;
  }

  private int getContentHeight() {
    int height = 0;
    int columnCount = cm.getColumnCount();
    for (int columnIndex = 0; columnIndex < columnCount; columnIndex++) {
      if (!cm.isHidden(columnIndex)) {
        Head head = getHead(columnIndex);
        XElement inner = head.getElement();
        height = Math.max(height, inner.getOffsetHeight());
      }
    }

    // adjust to allow space for sort icon
    height += 5;
    return height;
  }

  private void onHeaderSizeChange() {
    if (fixedHeight == -1) {
      setNaturalHeight();
    } else {
      setFixedHeight(fixedHeight);
    }
  }

  private void setFixedHeight(int newHeight) {
    int offsetHeight = getOffsetHeight();
    int contentHeight = getContentHeight();
    int deltaHeight = offsetHeight - contentHeight;
    newHeight -= deltaHeight;
    overrideHeaderHeight = newHeight;
    refresh();
  }

  private void setNaturalHeight() {
    overrideHeaderHeight = -1;
    refresh();
  }
  
}

WordWrapGridExample.java

import java.util.LinkedList;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.i18n.client.HasDirection;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.FramedPanel;
import com.sencha.gxt.widget.core.client.Resizable;
import com.sencha.gxt.widget.core.client.Resizable.Dir;
import com.sencha.gxt.widget.core.client.button.ToolButton;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.grid.HeaderGroupConfig;
import com.sencha.gxt.widget.core.client.menu.CheckMenuItem;
import com.sencha.gxt.widget.core.client.menu.Menu;
import com.sencha.gxt.widget.core.client.menu.MenuItem;
import com.sencha.gxt.widget.core.client.tips.ToolTipConfig;

/**
 * An example that illustrates a way to implement word wrap in {@link Grid} column headers and cells.
 * <p />
 * This class demonstrates many capabilities of word wrap in grids, including setting heading text, setting cell text,
 * setting column width, setting header height, getting header height and toggling force fit. Most applications will not
 * have need for all of these functions. The basic word wrap column header support can be found in
 * {@link WordWrapColumnHeader}.
 * <p />
 * This class generally uses the term <i>heading</i> to refer to the text of a column heading and the term <i>header</i>
 * to refer to the visual elements that display the heading. In some cases, this terminology is relaxed to make the
 * example more usable.
 */
public class WordWrapGridExample {

  public WordWrapGridExample() {
    RootPanel.get().add(asWidget());
  }

  /**
   * A value provider that supports a spreadsheet-like table with an arbitrary number of columns.
   */
  public static class ColumnValueProvider implements ValueProvider<Row, String> {

    private static int nextId;
    private final int columnIndex;
    private final String path = "Column" + Integer.toString(nextId++);

    public ColumnValueProvider(int columnIndex) {
      this.columnIndex = columnIndex;
    }

    @Override
    public String getPath() {
      return path;
    }

    @Override
    public String getValue(Row row) {
      return row.getColumn(columnIndex);
    }

    @Override
    public void setValue(Row row, String value) {
      row.setValue(columnIndex, value);
    }

  }

  /**
   * An array of column widths that can be used with {@link GridView#setForceFit(boolean)} to save column widths before
   * invoking <code>setForceFit(true)</code> and restore them after invoking <code>setForceFit(false)</code>.
   */
  public class ColumnWidths {

    private int[] columnWidths;

    public void restore(Grid<Row> grid) {
      ColumnModel<Row> columnModel = grid.getColumnModel();
      for (int columnIndex = 0; columnIndex < columnWidths.length; columnIndex++) {
        columnModel.setColumnWidth(columnIndex, columnWidths[columnIndex]);
      }
    }

    public void save(Grid<Row> grid) {
      ColumnModel<Row> columnModel = grid.getColumnModel();
      int columnCount = columnModel.getColumnCount();
      columnWidths = new int[columnCount];
      for (int columnIndex = 0; columnIndex < columnCount; columnIndex++) {
        ColumnConfig<Row, Object> columnConfig = columnModel.getColumn(columnIndex);
        columnWidths[columnIndex] = columnConfig.getWidth();
      }
    }
  }

  /**
   * A data model that supports a spreadsheet-like table with an arbitrary number of rows and columns.
   */
  public static class Row {

    private static int nextId;
    private final String[] columns;
    private final String key = "Row" + Integer.toString(nextId++);

    public Row(int columnCount) {
      columns = new String[columnCount];
    }

    public String getColumn(int columnIndex) {
      return columns[columnIndex];
    }

    public String getKey() {
      return key;
    }

    public void setValue(int columnIndex, String value) {
      columns[columnIndex] = value;
    }

  }

  /**
   * A model key provider that supports a spreadsheet-like table with an arbitrary number of rows.
   */
  public class RowKeyProvider implements ModelKeyProvider<Row> {
    @Override
    public String getKey(Row row) {
      return row.getKey();
    }
  }

  /**
   * A value provider that supports a spreadsheet-like table with an arbitrary number of rows.
   */
  public class RowValueProvider {
    public ValueProvider<Row, String> getColumnValueProvider(int columnIndex) {
      return new ColumnValueProvider(columnIndex);
    }
  }

  /**
   * A grid view that limits the width of the items in the column header menu's column sub-menu. Strictly speaking, this
   * is not required for a word wrap grid header because the sub-menu resizes itself to the width of the longest column
   * heading, but this does improve the usability by limiting the sub-menu width.
   */
  public static class WordWrapGridView extends GridView<Row> {
    @Override
    protected Menu createContextMenu(int colIndex) {
      Menu contextMenu = super.createContextMenu(colIndex);
      int lastItem = contextMenu.getWidgetCount() - 1;
      if (lastItem >= 0) {
        Widget widget = contextMenu.getWidget(lastItem);
        if (widget instanceof MenuItem) {
          MenuItem columns = (MenuItem) widget;
          Menu columnMenu = columns.getSubMenu();
          if (columnMenu != null) {
            int cols = columnMenu.getWidgetCount();
            for (int i = 0; i < cols; i++) {
              widget = columnMenu.getWidget(i);
              if (widget instanceof CheckMenuItem) {
                CheckMenuItem menuItem = (CheckMenuItem) widget;
                menuItem.setWidth(200);
              }
            }
          }
        }
      }
      return contextMenu;
    }
  }

  private static String DUMMY_TEXT_LONG = "<div class='pad-text'><p>Lorem ipsum dolor sit amet, consectetuer "
      + "adipiscing elit. Suspendisse velit metus, ultricies nec, aliquam quis, porttitor "
      + "a, felis. Donec est. Pellentesque urna dolor, bibendum nec, commodo a, laoreet sed, "
      + "turpis. Morbi tristique orci ac felis. Suspendisse nec tellus. Donec vitae quam "
      + "sed nibh luctus auctor. Suspendisse rhoncus lacus non magna. Proin consectetuer "
      + "arcu ac metus. Integer tristique erat id leo. Sed interdum dictum quam. Integer "
      + "eros. Vivamus eget elit. Quisque eget urna. Mauris venenatis molestie enim. "
      + "Aenean justo nisi, sodales vitae, pellentesque scelerisque, gravida vitae, diam. "
      + "<p>Curabitur pellentesque nulla et tellus. Fusce suscipit. Phasellus diam dolor, "
      + "ullamcorper a, placerat ac, elementum sit amet, arcu. In commodo. Duis vitae "
      + "justo vel quam nonummy imperdiet. Nam hendrerit convallis nisl. Praesent eu arcu. "
      + "Morbi justo. Proin semper venenatis nulla. Pellentesque habitant morbi tristique "
      + "senectus et netus et malesuada fames ac turpis egestas. Vivamus feugiat odio vitae "
      + "tortor. Mauris augue enim, volutpat vitae, aliquet eu, feugiat congue, nisl. Maecenas "
      + "ac orci. Donec malesuada. Proin nunc. Sed vitae urna. Nam ut mi. Nullam tempus vulputate ipsum. "
      + "Integer lacinia nonummy mauris. Nullam rhoncus accumsan nibh.</p><p>Fusce mattis. Donec "
      + "feugiat, lectus sit amet aliquet feugiat, nisi ante aliquam lacus, id facilisis metus nisl et "
      + "eros. Vestibulum tempor. Proin augue dui, commodo ut, aliquet non, tristique a, nulla. "
      + "Fusce dolor enim, bibendum at, placerat vel, ultricies vitae, libero. Praesent eu sem suscipit "
      + "dolor cursus gravida. Quisque tortor mauris, aliquam at, placerat at, iaculis non, ante. In "
      + "hendrerit, enim sed facilisis blandit, turpis erat lobortis velit, quis dapibus mauris "
      + "sapien ut nisl. Aliquam non leo eget elit ultrices ullamcorper. Aliquam porta, purus in "
      + "euismod vulputate, tellus pede imperdiet elit, vulputate viverra ipsum purus ac dolor. "
      + "Vivamus tempor lorem quis lorem. Maecenas et felis. Integer accumsan convallis est. Etiam ut "
      + "augue quis augue congue hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et "
      + "ultrices posuere cubilia Curae; Cras sem.</p><p>In hac habitasse platea dictumst. Donec facilisis rhoncus purus. "
      + "Suspendisse vulputate, nunc et mattis scelerisque, enim nisi imperdiet lectus, sed aliquet sapien nisl "
      + "feugiat tortor. Cras sit amet nisi. Vivamus dignissim. Integer a ligula. Morbi euismod. Aenean malesuada. "
      + "Pellentesque ut nisi eu purus egestas aliquam. Phasellus dolor augue, tempor a, rhoncus ac, accumsan ut, urna. "
      + "Aenean aliquet semper elit. Sed porta eros ac orci. Proin mollis dui iaculis felis. Suspendisse tortor nisi, "
      + "scelerisque at, adipiscing sagittis, vehicula et, sem. Etiam vulputate. Nullam vestibulum eros sed sapien. "
      + "<p>Duis molestie tempor arcu. Nam eu nunc. Vivamus at neque eu mi lobortis euismod. Sed erat pede, luctus a, "
      + "gravida quis, varius quis, ipsum. Proin vel massa. Cras auctor risus non nunc semper semper. Lorem ipsum dolor "
      + "sit amet, consectetuer adipiscing elit. Sed vel arcu. Sed consectetuer. Duis libero eros, imperdiet sed, "
      + "condimentum a, pretium nec, diam. Cum sociis natoque penatibus et magnis dis parturient montes, "
      + "nascetur ridiculus mus. Nunc egestas, urna nec interdum interdum, risus justo malesuada quam, vitae "
      + "consequat urna turpis at metus. Sed id neque eget diam euismod aliquet. Nam sed tortor. Praesent hendrerit "
      + "scelerisque dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper, odio id "
      + "rutrum volutpat, mauris ante tempus metus, bibendum porta dolor ligula pretium tortor.</div>";

  private static final int ROW_COUNT = 15;
  private static final int COLUMN_COUNT = 5;
  private final String[] SENTENCES = DUMMY_TEXT_LONG.replaceAll("\\<[^>]*>", "").split("\\. ");

  private ContentPanel fp;
  private RowValueProvider rvp = new RowValueProvider();

  private WordWrapColumnHeader<Row> header;

  public Widget asWidget() {

    if (fp == null) {
      fp = new FramedPanel();
      fp.setHeadingText("Word Wrap Grid");
      fp.setPosition(10, 10);
      fp.setPixelSize(1100, 700);
      new Resizable(fp, Dir.E, Dir.SE, Dir.S);

      ToolButton tb = new ToolButton(ToolButton.QUESTION);
      ToolTipConfig ttc = new ToolTipConfig("Example Info",
          "This example illustrates word wrap in grid headings and rows.");
      ttc.setMaxWidth(225);
      tb.setToolTipConfig(ttc);
      fp.addTool(tb);

      List<ColumnConfig<Row, ?>> ccs = new LinkedList<ColumnConfig<Row, ?>>();

      for (int i = 0; i < COLUMN_COUNT; i++) {
        ValueProvider<Row, String> cvp = rvp.getColumnValueProvider(i);
        SafeHtml sh = wrapString(createDummyText());
        ColumnConfig<Row, String> cc = new ColumnConfig<Row, String>(cvp, 200, sh);
        // Use a custom cell renderer to support word wrap in the grid's cells
        cc.setCell(new AbstractCell<String>() {
          @Override
          public void render(Context context, String value, SafeHtmlBuilder sb) {
            if (value == null || value.isEmpty()) {
              sb.appendHtmlConstant(" ");
            } else {
              sb.append(wrapString(value));
            }
          }
        });

        // ~~~~~~~~~~ cc.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
        cc.setHorizontalAlignment(HasHorizontalAlignment.HorizontalAlignmentConstant.endOf(HasDirection.Direction.LTR));
        cc.setMenuDisabled(true);
        cc.setSortable(false);
        // ~~~~~~~~~~

        ccs.add(cc);
      }

      final ColumnModel<Row> cm = new ColumnModel<Row>(ccs);

      HeaderGroupConfig config1 = new HeaderGroupConfig("test 1", 1, 2);

      cm.addHeaderGroup(0, 1, config1);

      final ListStore<Row> ls = new ListStore<Row>(new RowKeyProvider());
      ls.setAutoCommit(true);

      int columnCount = ccs.size();
      for (int i = 0; i < ROW_COUNT; i++) {
        Row row = new Row(columnCount);
        for (int j = 0; j < columnCount; j++) {
          row.setValue(j, createDummyText());
        }
        ls.add(row);
      }

      WordWrapGridView view = new WordWrapGridView();

      final Grid<Row> g = new Grid<Row>(ls, cm, view) {
        @Override
        protected void onAfterFirstAttach() {
          super.onAfterFirstAttach();

          // ~~~~~~~
          header.setHeight(225);
        }
      };

      header = new WordWrapColumnHeader<Row>(g, cm);
      g.getView().setColumnHeader(header);

      g.getView().setColumnLines(true);

      fp.setWidget(g);
    }

    return fp;
  }

  private String createDummyText() {
    int sentenceCount = 1 + Random.nextInt(5);
    StringBuilder s = new StringBuilder();
    for (int i = 0; i < sentenceCount; i++) {
      s.append(SENTENCES[Random.nextInt(SENTENCES.length)]);
      s.append(". ");
    }
    return s.toString();
  }

  private SafeHtml wrapString(String untrustedString) {
    SafeHtml escapedString = SafeHtmlUtils.fromString(untrustedString);
    SafeHtml safeHtml = SafeHtmlUtils.fromTrustedString("<span data-col=\"XXXXX\" style='white-space: normal;'>"
        + escapedString.asString() + "</span>");
    return safeHtml;
  }

}