View Full Version : How to gird cloumn Grouping? (cloumn integration)

17 Nov 2009, 12:59 AM
Hi All

I wonder how to gird cloumn Grouping (Not grid header)

like this

1 car truck 20091102
2 car bus 20091102
3 car taxi 20091103
1 car truck 20091102
2 bus
3 taxi 20091103

Now I use GridCellRender
each row data compare with now and previous
if same hide not show

I want to know another way to cloumn grouping..
(like GroupingView ... )

Do not Support GWT library or Somthing?

I use GWT 1.7 not extjs...

plesae help me!


17 Nov 2009, 8:07 AM
did you see this example?


17 Nov 2009, 4:45 PM

But I already see grouping Sample's than I know GroupingView
I used GroupingView and GroupingStore...
but I don't want to grouping like GroupingSample

original grid..


I want to make grid like below...


not grouping Sample

than I use GridCellRender

private Grid<C220uc030w1DataModel> createGrid() {
//config cell renderer1 : display row grouping
GridCellRenderer<Modeldata> pDateCellRenderer = new GridCellRenderer<Modeldata>() {
public String render(Modeldata model, String property, ColumnData config, int
rowIndex, int colIndex, ListStore<Modeldata> store,
Grid<Modeldata> grid) {
String var = (String) model.get(property);
pDate = (String) model.get(property);
return var;
return "";

but I want to know ...another way to make grid not gridCellrender..

Something Support GWT Library ..
GroupingView class Support Easy way to grouping...

if not support in library ......
I make code every page.......^^

18 Nov 2009, 8:02 AM
this is a little bit complicated, but you can do this with css.
but it works only if the text is a oneliner and not need to span over more. then you have to patch it more...

at first you have to remove the css from the original table row:

.my-grouping-grid .x-grid3-row{
.x-grid3-row { border:0px none;}
and then apply it again to the td in the row like this:

.my-grouping-grid .x-grid3-row td.x-grid3-cell,
.my-grouping-grid .x-grid3-summary-row td.x-grid3-cell {
border-top:1px solid green;
border-right:1px solid green;
and with this you can exclude some cells:

.my-grouping-grid .x-grid3-grouping-cell {
}the only thing you have to do to add in your GridCellRenderer this line if it is the a second line of a group:

config.css = "x-grid3-grouping-cell"and dont forget to give your grid this style: my-grouping-grid

PS: i dont tested it - i just set the css with firebug in firefox like this: