My Grid Requirement: Row Groupings. Is it possible?

[yarr]

Hi, I have a requirement for a grid for a project i was considering moving over to ext and i wondered if it was possible to implement it in a similar way to the way it is now...

I wanted to group rows together (with a header row for each grouping) so we could easily see a visual grouping of the data. and i wanted these groupings to be maintained when sorting rows so the sorting only applies within the group. Is this possible and how might one go about implementing this?
I'd rather not have a whole new grid for each grouping.

Thanks

[para]

I wrote something similar to what you're trying to do. Check out the screenshot.
As for maintaining the groupings when sorting, I did not implement that. (I didn't need it).
One way is to create multiple grids.
There may be a way to override the grid's sorting function to maintain the groupings. I'll try to look into it and get back to you.

[para]

I took a couple minutes (obviously quickly) and found the grid sorting algorithms. It seems that it internally defines a function to sort the records, and then uses the standard array sorting method to use that function.


//This is Ext.Store.applySort()
applySort : function(){
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2){
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction, fn);
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction, fn);
}
}
},

You should be able to override this function and replace the 'fn' function with a custom one that maintains groups. It may be a bit difficult to get it perfect, but it should be possible.

[yarr]

hi, thanks for your reply.
yeah, i did some digging through the code myself after posting and found that sort function, thanks.
That just leaves how to actually implementing the grid.
How did you achieve your grid particularly how did you go about rendering the group headings and what did the data look like that you provided to the store object.
Did you create your own grid implementation or did you use what is already available through the current Grid abstraction?

I gues the functionality I want would be solved by a future treegrid component?

[para]

I actually took a cheap approach (but effective for my needs).
When I want a header, I put the data values to be "_MyTitle". The "_" causes the change in the style of that row.



// change the style of the row
grid.getView().getRowClass = function(row, index) {
if(row.data.value && row.data.value.substring && row.data.value.length > 0) {
if (row.data.value.substring(0,1) == "_") {
return 'DT-propGrid-divider';
}
}
}

// don't want to display the _ in the titles
renderer: function(value){
if(value && value.substring) {
if(value.substring(0,1) == "_") {
return value.substring(1);
}
}
...
}

my associated style (could easily use ext's styles too)


.DT-propGrid-divider {
background: #fafafa url(ext-1.0.1/resources/images/aero/grid/grid-hrow.gif) repeat-x 0 1px;
padding-bottom: 1px;
border-bottom: 1px solid #b3cae9;
font: bold;
}