Wednesday, April 8, 2009

Setting tool tip for data in grid cells GXT

I have been working a lot on grid lately and had to get a tool tip with some information when we go over the grid cell that has data. I looked around and found QuickTip class in GXT that can be used. The data in the tooltip has to be written in HTML.

How to use it?

Create and initialize quickTip for the grid or for any widget you want the tool tip for

QuickTip quickTip = new QuickTip(grid);

using quickTip when rendering a grid column

1:    cm.getColumn(i).setRenderer(new GridCellRenderer<ModelData>(){  
2:          public String render(ModelData model,  
3:                     String property, ColumnData config,  
4:       int rowIndex, int colIndex,  
5:       ListStore<ModelData> store) {  
6:      String myColumnData = model.get( "satCellValue" );  
7:      StringBuffer  tooltip = new StringBuffer();  
8:      tooltip.append(model.get("satsiteno")).append(" - ").append(model.get("satdeptno"))  
9:     .append("<br>").append(model.get("satstartTime")).append(" - ").append(model.get("satendTime")); 
10:              String html = "<span qtip='" + tooltip + "'>" 
11:     + myColumnData + "</span>"; 
12:     return html; 
13:    } 
14:    return ""; 
15:    } 
16:   });

In the render method of gridCellRenderer add the quickTip html to the data for that column using qtip which indicates the quickTip data. I have not tried it but i think quickTip works the same for all the other widgets as well.

No comments: