Blog Archives

If you need tooltips within a grid you should create your own GridCellRenderer.

public class MyData extends BaseModelData {
   public MyData(String name, Date date) {
      set("name", name);
      set("date", date);
   }
}

public class MyPanel extends ContentPanel {
   public MyPanel() {
      // ...
      ListStore store = new ListStore();
      Grid grid = new Grid(store, new MyColumnModel());
      // ...
      add(grid);
      new QuickTip(grid);  // don't forget it!
   }
}

public class MyColumnModel extends ColumnModel {
   public MyColumnModel() {
      super(new ArrayList());

      // our ModelData has two properties: name and date
      ColumnConfig aCol = new ColumnConfig("name", "Name", 300);
      aCol.setRenderer(new NameRenderer());
      configs.add(aCol);

      ColumnConfig bCol = new ColumnConfig("date", "Date", 100);
      bCol.setRenderer(new DateRenderer());
      configs.add(bCol);
   }

   private class NameRenderer implements GridCellRenderer {
      public Object render(MyData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
         return "<div>" + model.get(property) + "</div>";
      }
   }

   private class DateRenderer implements GridCellRenderer {
      public Object render(MyData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
         String date = DateTimeFormat.getFormat("dd.MM.yyyy").format(model.get("date"));
         return "<div qtitle=\"Date\" qtip=\"a date with format dd.MM.yyyy\">" + date + "</div>";
      }
   }
}

We can return HTML code from the renderer, which has “qtitle” and “qtip” attributes, which are used by the QuickTip instance.