MultiGrouping and MultiGroupingSummary

[azesm]

Hi ExTriqui!

Here's more to this grid would make the total amount of the line at the bottom. It would be cool at all.
Be able to help?

[ExTriqui]

I'm working on it right now.
Hopefully, you'll have 3 choices: summary in the header row, summary at the bottom of the group, and summary in the header row when collapsed and summary at the bottom of the group when expanded.

[azesm]

Hi ExTriqui!
But if you have done like this:
http://www.rahulsingla.com/blog/2010...hout-grouping)

[azesm]

Hi ExTriqui!
I did total summary row.


http://www.sencha.com/forum/showthread.php?242633-MultiGrouping-Grid-and-Summary&p=895340&viewfull=1#post895340

[anshumania]

Hi , I recently started evaluating the various mutlgrouping plugins out there and found the code in this thread by Extriqui to be very useful.

Can some one throw some light on how to adjust the grouped header column so that it aligns with the columns below it

q.PNG

I have tried fiddling around with the css in Multigrouping.js but am afraid am not very skilled in css handling an d manipulation ...
I guess i need to make changes here but am not sure on how to do it ..
features in the grid

ftype:'multigrouping',            groupHeaderTpl: [
                             '{name}: ({rows.length}) ', 
                             '{[this.readOut(values)]}',
                             {
                                 readOut:function(values) {
                                  .... return sumColumn1 + ' space' + sumColumn2 + ...
                                }

how do i substitute space for the columnwidth that the value belongs to ?

getFeatureTpl: function(values, parent, x, xcount){

getGroupHeaderColumns{

but am not able to manage to get the view.
i would like to sum up all the columns and then show their totals in their respective header under the column name. (that way i can get rid of my tree grid component ..and this works very well with large datasets ).

Thanks in advance....

[azesm]

Hi anshumania

This is my code - does just what you need
Снимок экрана 2012-10-06.jpg

http://www.sencha.com/forum/showthre...l=1#post895340

[anshumania]

Thanks .. but wouldn't the above not work with 4.1.1 ?
I want to show the total summary in the grouped header not the summary row ..
I see that you have an option

totalSummaryTopLine: true,      // Default: true
           totalSummaryColumnLines: false

Does this show up the totals in the groupHeaderTpl ?
this current solution i have is working on 4.1.1 so i think, i just need to adjust the css somehow .. but i am not well versed in css and templating as such. so pointers or code snippets would be useful ..

[anshumania]

For my environment i needed only the multigrouping; because for performance reasons i wanted to group my data as required on the server side .(and also there was a small bug in the collapse of the original multigrouping summary (css most likely) so i could not fix it).
Anyway the only reason i wanted to do this is so to deal with large data sets (and dynamic grouping) and check the performance on IE8. the results are good and encouraging. I had already used a tree grid (due to our business case there is a lot of data to deal with on the client side ) and the performance on IE8 was very bad
So the assumption is to do some sort of intelligent grouping at the backend.

this is the minor hack i had to implement and thanks for the code

had to resort to a few hacks to get this to work. still waiting on an official answer. The main reason i had to do this and not use the multigrouping summary is because - i want to limit the number of records from the server. I can do some smart grouping of my business objects at the server side. - the main reason to do this is because of IE8's performance on larger sets of data. - had already tried the extjs4 tree grid component which works well on chrome but had performance issues on IE8.
the hack is to
a) use an array property in the grid to store the dom elements which i want to manipulate
b) use a boolean to know when the layout is completed the first time b) add listeners for afterlayout ( when your app can do an Ext.get('..dom element..') you know you are done )
( i am not well versed with css and am still awaiting an official reply on how to probably use the groupedHeaderTpl to acheive the same .. ).

The listener :

listeners : 
{
 afterlayout : function(eopts)
 {
     var x = this.mOwnArray;
     if(!this.loadedwithVals && x.length > 0)
         {
    for(var i =0 ; i<x.length ; i++)
        {
            var dom = Ext.get(x[i].id);
            var theId = dom.id;
            theId = theId.match(/\d+/)[0];
            var title = dom.query("td[class='x-grid-cell x-grid-cell-first']");
            title[0].className = 'x-grid-cell x-grid-cell-gridcolumn-' + theId + ' x-grid-cell-first';
            title[0].colSpan=1;
            var groupedHeader = dom.query("div[class='x-grid-group-title']");
            groupedHeader[0].innerHTML =  x[i].name + '(' + x[i].length + ')';
            for(var year=2012;year<=2018;year++)
                {
                var t = "t"+year;
                var someText1 = '<td class=" x-grid-cell x-grid-cell-numbercolumn">';
                var someText2 = '<div class="x-grid-cell-inner " style="text-align: left; ;">';
                var someText3 = '<div class="x-grid-group-title">' + x[i].total[t] + '</div></div></td>';
                var someText = someText1 + someText2 + someText3;
                dom.insertHtml("beforeEnd",someText);   
                }
        }
            this.loadedwithVals = true;
     }
}

and the feature as in

features: [ 
    {
        ftype:'multigrouping',
        startCollapsed : true,
        groupHeaderTpl: [
                         '{[this.readOut(values)]}',
                         {
                             readOut:function(values) {
                                 var header = new Object();
                                 header.id = values.groupHeaderId;
                                 header.sum = [];
                                 header.total = new Object();
                                 for(var year = 2012 ; year <= 2018 ; year++)
                                     {
                                        var t = "t"+year;
                                        header.total[t] = [];
                                     }
                                 // all the records in this header
                                    for( var i = 0 ; i< values.records.length ; i++)
                                        {
                                            // for all the 'years' in this record
                                            for(var year=2012;year<=2018;year++)
                                                {
                                                    var d = "d"+year;
                                                    var ct = "t" + year;
                                                    var arecord = values.records[i].data;
                                                    var val = parseFloat(arecord[d].mp);
                                                    val = isNaN(val) ? 0.0 : val;
                                                    Ext.Array.push(header.total[ct],val);
                                                }
                                        }
                                // push the sum of the records into its top level group
                                         for(var year = 2012 ; year <= 2018 ; year++)
                                         {
                                            var t = "t"+year;
                                            var sum = Ext.Array.sum(header.total[t]);
                                            header.total[t] = sum.toFixed(2);
                                         }
                                 header.name = values.name;
                                 header.length = values.records.length;
                                 var headerName = values.name;
                                 if(values.hasOwnProperty('parent'))
                                     {
                                        var parent = values.parent;
                                        headerName = headerName.replace(parent,'');
                                     }
                                 header.name = headerName;
                                 header.length = values.records.length;
                                 Ext.Array.push(grid.mOwnArray,header);
                                 // really not used
                                return values.name +  '(' + values.records.length + ')';
                                }
                         }
                     ]

    },
]

[ExTriqui]

Hi. I'm a bit confused now.

As I mentioned in the first post, the plugin I wrote shows groups and optionally a summary per group, and it does so while not messing with the summary plugin.

So if you want summary for every group and then a total summary for the whole grid, you just have to use the MultiGroupingSummary and the 'official' summary plugin.
Something like this:

features: [Ext.create('Ext.grid.feature.MultiGroupingSummary'), { ftype: "summary"}];

MultiGrouping will only group rows but won't display summaries, you have to use MultiGourpingSummary for that.

This will show the summary for every group in the group header row with each value under the right column and the total summary values the same way.

¿Are you having problems with this?

[anshumania]

No i did not have problems with the plugin and it works fine for the most part ( i think there was a css issue related to the first group but i did not pursue it)..
However i wanted to reduce the data from the server side i did some grouping on my data (to make ie8 more responsive) so i wanted to do a summary or grouping of a field within a record (not of records).

The summary plugin works on an assumption (which is fine and correct in most of the cases) i.e every row respresents a line of data and the grouping would then work based on the partiuclar field in the record.
However in our specific business case these would translate into thousands of rows therefore i map my model and hence my record to contain a field which actually contains key value pairs of records that i would want to group on ; thus collapsing a group into a single record based on say a few fields.

for instance instead of having 8 rows of

CountryA field1A field1B ... Year2011
CountryA field1A field1B ... Year2012
CountryA field1A field1B ... Year2013 ...
CountryA field1A field1B ... Year2018

Instead of having so I return a single record
CountryA field1A field1B ... {d2012:val, d2013:val, ....d2018:val}

In order to group by any of field1A or field1B or both I would need the total of all vals in last Field
so the only place where i could do this grouping was defining my own groupHeaderTpl for Mutligrouping

 fgroupHeaderTpl : [    '{[this.readOut(values)]}',
{
   readOut : function(values) {
// it is not possible to do a Ext.get of the groupHeaderId here
   // so push the groupheaderIds to an array property in the grid
   // do the calculations for each group and push in the sum for that field (column)
     return value.sn
}

and then in the afterLayout for the grid

afterlayout : function(eopts) {
   // retrieve the groupedheaderIds and use the calculated values to create the groupedheader
     var x = this.mOwnArray;
// then do Ext.get(groupheaderId) and replace the dom ...

This is the test version that i developed and its performing fairly well for large datasets in ie8. (as opposed to the treegrid).

test.png