GXT3 Grid cell rendering

Question

How can I render a grid column as multiline grid column using GXT 3 grids.

e.g

ColumnConfig<ExceptionEntry, String> name = new ColumnConfig<ExceptionEntry, String>(props.name(), 50, "Name");
name.setColumnStyle(new SafeStyles(){
        @Override
        public String asString() {
            return // what styles to use for multiline rendering;
        }
    });

name.setCell(new AbstractCell<String>() {
    @Override
        public void render(com.google.gwt.cell.client.Cell.Context context,
                String value, SafeHtmlBuilder sb) {
             ??? what needs to be done to render the column as multiline column
        }
    });

Answer 1

You can do that the easy and the hard way.

The easy one:

name.setCell(new AbstractCell<String>() {
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
         sb.appendHtmlConstant("<div style=\"white-space: normal;\" >" + value + "</div>");
    }
});

The hard (but much better) way:

1) Create custom GridAppearance to be used instead of default one from your theme:

import com.google.gwt.core.client.GWT;
import com.sencha.gxt.theme.base.client.grid.GridBaseAppearance;

public class YourGridAppearance extends GridBaseAppearance {

  public interface YourGridStyle extends GridStyle {
  }

  public interface YourGridResources extends GridResources {

    @Source({ "com/sencha/gxt/theme/base/client/grid/Grid.css", "YourGrid.css" })
    @Override
    YourGridStyle css();
  }

  public YourGridAppearance() {
    this(GWT.<YourGridResources> create(YourGridResources.class));
  }

  public YourGridAppearance(YourGridResources resources) {
    super(resources);
  }
}

2) Copy /theme-you-use/client/grid/Grid.css to YourGrid.css and put it in the same folder where you've created YourGridAppearance class. Here is an example based on Grey theme:

@CHARSET "UTF-8";
.rowHighlight {
    border: 1px dotted #535353;
}

.rowAlt .cell {
    background-color: #FAFAFA;
}

.rowOver .cell {
    background-color: #EEEEEE;
}

.cell {
    border-color: #FAFAFA #EDEDED #EDEDED;
    border-right: 0 solid #EDEDED;
    font: 14px tahoma,arial,verdana,sans-serif; 
}

.cellSelected {
    background-color: #C9C9C9 !important;
    color: #000000;
}

.cellInner {
    white-space: normal;
    line-height: 15px;
}

.columnLines .cell {
    border-right-color: #EDEDED;
}

.rowOver .cell,.rowOver .rowWrap {
    border-color: #DDDDDD;
}

.rowWrap {
    border-color: #FAFAFA #EDEDED #EDEDED;
    border-right: 0 solid #EDEDED;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
}

.rowSelected .cell,.rowSelected .rowWrap {
    background-color: #DFE8F6 !important;
    border-color: #A3BAE9;
}

.footer {
    background: #F7F7F7 none repeat scroll 0 0;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    display: block;
    overflow: hidden;
    position: relative;
}

The most important part of it is this one:

.cellInner {
    white-space: normal;
}

3) Replace default grid appearance with your custom one. To do that you have to add the following lines to your-project.gwt.xml:

<replace-with class="package.name.of.your.custom.theme.class.YourGridAppearance">
  <when-type-is class="com.sencha.gxt.widget.core.client.grid.GridView.GridAppearance" />
</replace-with>