GXT 4 custom tree grid appearance with multiple lines, line return and template used as a custom cell.

Css3TreeAppearanceExt.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ImageResource;
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.DOM;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.AbstractImagePrototype.ImagePrototypeElement;
import com.sencha.gxt.theme.triton.client.base.tree.Css3TreeAppearance;
import com.sencha.gxt.widget.core.client.tree.Tree.CheckState;
import com.sencha.gxt.widget.core.client.tree.Tree.Joint;
import com.sencha.gxt.widget.core.client.tree.TreeStyle;
import com.sencha.gxt.widget.core.client.tree.TreeView.TreeViewRenderMode;

/**
 * Based on triton theme for this build. Switch out theme if needed, by switching package imports.
 */
public class Css3TreeAppearanceExt extends Css3TreeAppearance {

  public interface Css3TreeResourcesExt extends Css3TreeResources {
    // Switch theme if needed by changing path
    @Override
    @Source({ "com/sencha/gxt/theme/base/client/tree/Tree.gss",
        "com/sencha/gxt/theme/triton/client/base/tree/Css3Tree.gss" })
    Css3TreeStyleExt style();
  }

  public interface Css3TreeStyleExt extends Css3TreeStyle {
  }

  private Css3TreeResources resources;

  public Css3TreeAppearanceExt() {
    this(GWT.<Css3TreeResources>create(Css3TreeResourcesExt.class));
  }

  public Css3TreeAppearanceExt(Css3TreeResources resources) {
    super(resources);
    this.resources = resources;
  }

  /**
   * Copied from the super class.
   */
  @Override
  public void renderNode(SafeHtmlBuilder sb, String id, SafeHtml html, TreeStyle ts, ImageResource icon,
      boolean checkable, CheckState checked, Joint joint, int level, TreeViewRenderMode renderMode) {
    Css3TreeStyle style = resources.style();

    if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.BUFFER_WRAP) {
      sb.appendHtmlConstant("<div id=\"" + SafeHtmlUtils.htmlEscape(id) + "\" class=\"" + style.node() + "\">");

      // ~~~ workaround, set height to auto
      sb.appendHtmlConstant("<div class=\"" + style.element() + "\" style='height: auto !important;'>");
    }

    if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.BUFFER_BODY) {

      sb.appendHtmlConstant(getIndentMarkup(level));

      ImagePrototypeElement jointProtoEl = DOM.createDiv().cast();
      jointProtoEl.addClassName(style.joint());
      switch (joint) {
      case COLLAPSED:
        AbstractImagePrototype
            .create(ts.getJointCloseIcon() == null ? resources.jointCollapsedIcon() : ts.getJointCloseIcon())
            .applyTo(jointProtoEl);
        break;
      case EXPANDED:
        AbstractImagePrototype
            .create(ts.getJointOpenIcon() == null ? resources.jointExpandedIcon() : ts.getJointOpenIcon())
            .applyTo(jointProtoEl);
        break;
      default:
        break;
      }
      sb.appendHtmlConstant(jointProtoEl.getString());

      ImagePrototypeElement checkProtoEl = DOM.createDiv().cast();
      checkProtoEl.addClassName(style.check());
      if (checkable) {
        switch (checked) {
        case CHECKED:
          AbstractImagePrototype.create(resources.checked()).applyTo(checkProtoEl);
          break;
        case UNCHECKED:
          AbstractImagePrototype.create(resources.unchecked()).applyTo(checkProtoEl);
          break;
        case PARTIAL:
          AbstractImagePrototype.create(resources.partialChecked()).applyTo(checkProtoEl);
          break;
        }
      }
      sb.appendHtmlConstant(checkProtoEl.getString());

      ImagePrototypeElement iconProtoEl = DOM.createDiv().cast();
      iconProtoEl.addClassName(style.icon());
      if (icon != null) {
        AbstractImagePrototype.create(icon).applyTo(iconProtoEl);
      }
      sb.appendHtmlConstant(iconProtoEl.getString());

      sb.appendHtmlConstant("<div class=\"" + style.text() + "\">" + html.asString() + "</div>");
    }

    if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.BUFFER_WRAP) {
      sb.appendHtmlConstant("</div>");
      sb.appendHtmlConstant("</div>");
    }

  }

}

template.html

<!-- xtemplate, vars not used in this example yet. -->
<style>
</style>
<div>
	<div>
		<span>Line1</span>
		<input type='text' />
		<span>Something2</span>
		<input type='text' />
	</div>
	<div>
		<span>Line2</span>
		<select>
			<option value="A">A</option>
		</select>
		<span>Something4</span>
		<input type='text' />
	</div>
</div>

TreeGridWithCellAndTemplate.java

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.core.client.ToStringValueProvider;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.core.client.XTemplates;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.data.shared.TreeStore;
import com.sencha.gxt.theme.triton.client.base.grid.Css3GridAppearance;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.container.Viewport;
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.GridView.GridAppearance;
import com.sencha.gxt.widget.core.client.tree.Tree.TreeAppearance;
import com.sencha.gxt.widget.core.client.treegrid.TreeGrid;

public class TreeGridWithCellAndTemplate implements EntryPoint {

  public interface HtmlTemplates extends XTemplates {
    @XTemplate(source = "template.html")
    SafeHtml getTemplate(String value);
  }

  private HtmlTemplates tpl = GWT.create(HtmlTemplates.class);
  
  @Override
  public void onModuleLoad() {
    final TreeGrid<BaseDto> treeGrid = createTreeGrid();

    ContentPanel con = new ContentPanel();
    con.setBorders(true);
    con.add(treeGrid);

    Viewport viewport = new Viewport();
    viewport.add(con);
    RootPanel.get().add(viewport);
  }

  class KeyProvider implements ModelKeyProvider<BaseDto> {
    @Override
    public String getKey(BaseDto item) {
      return (item instanceof FolderDto ? "f-" : "m-") + item.getId().toString();
    }
  }

  public TreeGrid<BaseDto> createTreeGrid() {
    TreeStore<BaseDto> store = new TreeStore<BaseDto>(new KeyProvider());

    FolderDto root = getMusicRootFolder();
    for (BaseDto base : root.getChildren()) {
      store.add(base);
      if (base instanceof FolderDto) {
        processFolder(store, (FolderDto) base);
      }
    }

    ColumnConfig<BaseDto, String> cc1 = new ColumnConfig<BaseDto, String>(new ToStringValueProvider<BaseDto>("name"));
    cc1.setHeader("Name");
    cc1.setWidth(500);
    // ~~~ set a custom cell
    cc1.setCell(new AbstractCell<String>() {
      @Override
      public void render(Context context, String value, SafeHtmlBuilder sb) {
        sb.append(tpl.getTemplate(value));
      }
    });

    ColumnConfig<BaseDto, String> cc2 = new ColumnConfig<BaseDto, String>(new ValueProvider<BaseDto, String>() {
      @Override
      public String getValue(BaseDto object) {
        return object.getName();
      }

      @Override
      public void setValue(BaseDto object, String value) {
      }

      @Override
      public String getPath() {
        return "somecol";
      }
    });
    cc2.setHeader("Some Other Col");
    cc2.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

    List<ColumnConfig<BaseDto, ?>> columns = new ArrayList<ColumnConfig<BaseDto, ?>>();
    columns.add(cc1);
    columns.add(cc2);

    ColumnModel<BaseDto> cm = new ColumnModel<BaseDto>(columns);

    GridAppearance gridAppearance = new Css3GridAppearance();
    TreeAppearance treeGridAppearance = new Css3TreeAppearanceExt(); // ~~~~ workaround for custom row
    final TreeGrid<BaseDto> tree = new TreeGrid<BaseDto>(store, cm, cc1, gridAppearance, treeGridAppearance );
    
    tree.getView().setAutoExpandColumn(cc1);
    tree.getView().setAutoExpandMax(500);

    cc1.setResizable(true);

    return tree;
  }

  private void processFolder(TreeStore<BaseDto> store, FolderDto folder) {
    for (BaseDto child : folder.getChildren()) {
      store.add(folder, child);
      if (child instanceof FolderDto) {
        processFolder(store, (FolderDto) child);
      }
    }
  }

  public FolderDto getMusicRootFolder() {
    FolderDto root = makeFolder("Root");

    FolderDto author = makeFolder("Beethoven");
    List<BaseDto> children = new ArrayList<BaseDto>();
    children.add(author);
    root.setChildren(children);

    FolderDto genre = makeFolder("Quartets");
    author.addChild(genre);

    FolderDto quartets = genre;

    genre.addChild(makeMusic("Six String Quartets", author, genre));
    genre.addChild(makeMusic("Three String Quartets", author, genre));
    genre.addChild(makeMusic("Grosse Fugue for String Quartets", author, genre));

    genre = makeFolder("Sonatas");
    quartets.addChild(genre);

    genre.addChild(makeMusic("Sonata in A Minor", author, genre));
    genre.addChild(makeMusic("Sonata in F Major", author, genre));

    genre = makeFolder("Concertos");
    author.addChild(genre);

    genre.addChild(makeMusic("No. 1 - C", author, genre));
    genre.addChild(makeMusic("No. 2 - B-Flat Major", author, genre));
    genre.addChild(makeMusic("No. 3 - C Minor", author, genre));
    genre.addChild(makeMusic("No. 4 - G Major", author, genre));
    genre.addChild(makeMusic("No. 5 - E-Flat Major", author, genre));

    genre = makeFolder("Symphonies");
    author.addChild(genre);

    genre.addChild(makeMusic("No. 1 - C Major", author, genre));
    genre.addChild(makeMusic("No. 2 - D Major", author, genre));
    genre.addChild(makeMusic("No. 3 - E-Flat Major", author, genre));
    genre.addChild(makeMusic("No. 4 - B-Flat Major", author, genre));
    genre.addChild(makeMusic("No. 5 - C Minor", author, genre));
    genre.addChild(makeMusic("No. 6 - F Major", author, genre));
    genre.addChild(makeMusic("No. 7 - A Major", author, genre));
    genre.addChild(makeMusic("No. 8 - F Major", author, genre));
    genre.addChild(makeMusic("No. 9 - D Minor", author, genre));

    author = makeFolder("Brahms");
    root.addChild(author);

    genre = makeFolder("Concertos");
    author.addChild(genre);

    genre.addChild(makeMusic("Violin Concerto", author, genre));
    genre.addChild(makeMusic("Double Concerto - A Minor", author, genre));
    genre.addChild(makeMusic("Piano Concerto No. 1 - D Minor", author, genre));
    genre.addChild(makeMusic("Piano Concerto No. 2 - B-Flat Major", author, genre));

    genre = makeFolder("Quartets");
    author.addChild(genre);

    genre.addChild(makeMusic("Piano Quartet No. 1 - G Minor", author, genre));
    genre.addChild(makeMusic("Piano Quartet No. 2 - A Major", author, genre));
    genre.addChild(makeMusic("Piano Quartet No. 3 - C Minor", author, genre));
    genre.addChild(makeMusic("String Quartet No. 3 - B-Flat Minor", author, genre));

    genre = makeFolder("Sonatas");
    author.addChild(genre);

    genre.addChild(makeMusic("Two Sonatas for Clarinet - F Minor", author, genre));
    genre.addChild(makeMusic("Two Sonatas for Clarinet - E-Flat Major", author, genre));

    genre = makeFolder("Symphonies");
    author.addChild(genre);

    genre.addChild(makeMusic("No. 1 - C Minor", author, genre));
    genre.addChild(makeMusic("No. 2 - D Minor", author, genre));
    genre.addChild(makeMusic("No. 3 - F Major", author, genre));
    genre.addChild(makeMusic("No. 4 - E Minor", author, genre));

    author = makeFolder("Mozart");
    root.addChild(author);

    genre = makeFolder("Concertos");
    author.addChild(genre);

    genre.addChild(makeMusic("Piano Concerto No. 12", author, genre));
    genre.addChild(makeMusic("Piano Concerto No. 17", author, genre));
    genre.addChild(makeMusic("Clarinet Concerto", author, genre));
    genre.addChild(makeMusic("Violin Concerto No. 5", author, genre));
    genre.addChild(makeMusic("Violin Concerto No. 4", author, genre));

    return root;
  }

  private static long autoId = 0;

  private FolderDto makeFolder(String name) {
    FolderDto theReturn = new FolderDto(++autoId, name);
    theReturn.setChildren(new ArrayList<BaseDto>());
    return theReturn;
  }

  private MusicDto makeMusic(String name, FolderDto author, FolderDto genre) {
    return makeMusic(name, author.getName(), genre.getName());
  }

  private MusicDto makeMusic(String name, String author, String genre) {
    return new MusicDto(++autoId, name, genre, author);
  }

  public class BaseDto implements Serializable {

    private Long id;
    private String name;

    protected BaseDto() {

    }

    public BaseDto(Long id, String name) {
      this.id = id;
      this.name = name;
    }

    public Long getId() {
      return id;
    }

    public void setId(Long id) {
      this.id = id;
    }

    public String getName() {
      return name;
    }

    public void setName(String name) {
      this.name = name;
    }

    @Override
    public String toString() {
      return name;
    }

  }

  public class FolderDto extends BaseDto {

    private List<BaseDto> children;

    protected FolderDto() {

    }

    public FolderDto(Long id, String name) {
      super(id, name);
    }

    public List<BaseDto> getChildren() {
      return children;
    }

    public void setChildren(List<BaseDto> children) {
      this.children = children;
    }

    public void addChild(BaseDto child) {
      getChildren().add(child);
    }
  }

  public class MusicDto extends BaseDto {

    private String genre;
    private String author;

    protected MusicDto() {
    }

    public MusicDto(Long id, String name, String genre, String author) {
      super(id, name);
      this.genre = genre;
      this.author = author;
    }

    public String getGenre() {
      return genre;
    }

    public void setGenre(String genre) {
      this.genre = genre;
    }

    public String getAuthor() {
      return author;
    }

    public void setAuthor(String author) {
      this.author = author;
    }

  }
}

The custom appearance is extends the Triton theme. Change the package and resource path if you extend a different theme.