1. #11
    Sencha User
    Join Date
    Sep 2011
    Location
    Russia
    Posts
    10
    Vote Rating
    1
    azesm is on a distinguished road

      0  

    Default


    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?

  2. #12
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    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.

  3. #13
    Sencha User
    Join Date
    Sep 2011
    Location
    Russia
    Posts
    10
    Vote Rating
    1
    azesm is on a distinguished road

      0  

    Default


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

  4. #14

  5. #15
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    13
    Vote Rating
    0
    anshumania is on a distinguished road

      0  

    Default multigrouping header total under respective column names

    multigrouping header total under respective column names


    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
    Code:
    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 ?


    Code:
    getFeatureTpl: function(values, parent, x, xcount){
    Code:
    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....
    Attached Images
    Last edited by anshumania; 5 Oct 2012 at 11:44 AM. Reason: more clearity

  6. #16
    Sencha User
    Join Date
    Sep 2011
    Location
    Russia
    Posts
    10
    Vote Rating
    1
    azesm is on a distinguished road

      0  

  7. #17
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    13
    Vote Rating
    0
    anshumania is on a distinguished road

      0  

    Default


    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
    Code:
    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 ..

  8. #18
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    13
    Vote Rating
    0
    anshumania is on a distinguished road

      0  

    Default using only multigroup

    using only multigroup


    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 :

    Code:
    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

    Code:
    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 + ')';
                                    }
                             }
                         ]
    
        },
    ]

  9. #19
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    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:
    Code:
    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?

  10. #20
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    13
    Vote Rating
    0
    anshumania is on a distinguished road

      0  

    Default


    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
    Code:
     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
    Code:
    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