[FEAT] Multiple grouped columns

[axelnormand]

Hello
I'm looking to enhance angular grid to allow to allow you to specify multiple sets of grouped columns

Plus modify the look and feel so set of grouped column only renders in one column in the table rather than spread out horizontally across the grouped rows

Hopefully this attempt at an ASCII diagram explains it better:

Region (Grouped)    |   Area (Grouped)  |   Population (aggregated)
--------------------------------------------------------------------------------------------------------
- Europe                                    742,500,000
    - UK                                    60,000,000  
        - London                            8,000,000
                    - North                 3,000,000
                        - Camden            500,000
                        - Highgate          300,000
                    - South
                    - East
        - Manchester

    - France
- Asia

Notice also how "North" is one row below "London" too

How would one suggest going about this change?
I can either create a custom group cell renderer for that second grouping in Area using groupInnerCellRenderer

Or is it easier to fork angular grid and add new option to specify multi levels of groupKeys?

Any suggestions appreciated.
Thank you

[ceolter]

Hi, so you want two columns to have expand and collapse feature??

This is instead of having one column with all group nodes??

So in your example, region in first col, area in second col, and city
possibly in third?
On 12 May 2015 09:18, "axelnormand" notifications@github.com wrote:

Hello
I'm looking to enhance angular grid to allow to allow you to specify
multiple sets of grouped columns

Plus modify the look and feel so set of grouped column only renders in one
column in the table rather than spread out horizontally across the grouped
rows

Hopefully this attempt at an ASCII diagram explains it better:
Region (Grouped) | Area (Grouped) | Population (aggregated)

Europe 742,500,000
-

  UK 60,000,000
   - London 8,000,000 - North 3,000,000 - Camden 500,000 - Highgate
     300,000 - South - East
     - Manchester
   -

  France
   - Asia

Notice also how "North" is one row below "London" too

How would one suggest going about this change?
I can either create a custom group cell renderer for that second grouping
in Area using groupInnerCellRenderer

Or is it easier to fork angular grid and add new option to specify multi
levels of groupKeys?

Any suggestions appreciated.
Thank you

—
Reply to this email directly or view it on GitHub
#127.

[axelnormand]

Thanks for extremely prompt reply! Exactly that.

Col 1 has groupKeys of Continent, Country, City
Col 2 has groupKeys of Area, Constituency

Yes possibly a third too.

[ceolter]

ok i've checked something into the branch 'selection' if you want to grab that branch (won't be merging for a few days, but it's stable, so you can grab the branch).

new option: groupSuppressGroupColumn

when set to true, there is no grouping column. so if you just set it to true, and do nothing else, then your grid will be a bit useless, as there will be no way to expand the groups.

however that's where you come in - you can provided your own cell renderers. i'd suggest you create a cell renderer that takes the level of grouping to show (eg 1, 2, 3 etc) and then provides whatever GUI you want to show to expand / contract that group. to expand a group, just set the expanded=true on the node, and call the api function groupExpandedOrCollapsed.

that's how i would intend you to do it. grid provides a quick 'default' grouping feature (which you can now turn off). if you want to customise, then do that with cell renderers.

ok - don't see any more grid changes, so closing this issue!

[axelnormand]

fantastic! thanks so much
Will get on and write my cell renderer now

[axelnormand]

For others wanting to do this here is a code snippet that might help you

var groupKeys = ['Region', 'Country', 'City', 'Area'];

var columns = [
    {
        field: "Region",
        cellRenderer: regionRenderer,
    },

    {
        field: "Area",
        cellRenderer: areaRenderer,
    },    
    {        
        field: "Population",
    }];


    /**
     * render column 1 with expand collapse
     */ 
    function regionRenderer(params) {
        if (params.node.level >= groupKeys.length - 1) {
            //dont render leaves in col 1 (ie area/constituency)
            return "";
        }

        return groupCellRenderer(params);
    }

    /**
     * render area with expand collapse for consituency
     */
    function areaRenderer(params) {
        if (params.node.level < groupKeys.length - 1) {
            //dont render parents (ie region, country etc)
            return "";
        }

        return groupCellRenderer(params);
    }


      /**
       * generic expand/collapse cell renderer
       * dont use angular to keep it speedy
       */
    function groupCellRenderer(params) {
        var cellEl = document.createElement('span');
        cellEl.onclick = function () {
            params.node.expanded = !params.node.expanded;
            params.api.onGroupExpandedOrCollapsed();
        };

        var isGroupNode = !!params.node.key; //group node if group key not empty;

        if (isGroupNode) {
            //expand icon
            var iconClass = params.node.expanded ? "fa-minus-square-o" : "fa-plus-square-o"; //font awesome icon classes
            var iconEl = document.createElement('i');
            iconEl.className = "fa " + iconClass;
            cellEl.appendChild(iconEl);
        }

        //text
        var textEl = document.createElement('span');
        var text = isGroupNode ? params.node.key : params.value;
        textEl.innerHTML = " " + text;
        cellEl.appendChild(textEl);

        return cellEl;
    }

    //return field totals
    function groupAggFn(nodes) {
        var agg = {
            Population: 0,            
        };

        nodes.forEach(function (node) {
            agg.Population += node.data.Population;
        });
        return agg;
    }

////////// in link function //////  
     $scope.gridOptions = {
        columnDefs: columns,
        rowData: someData,
        rowSelection: "single",
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        groupKeys: groupKeys,
        groupAggFunction: groupAggFn,
        groupSuppressGroupColumn: true, //handle our own group rendering of expand/collapse
    };

[ceolter]

thanks @axelnormand :)

[parthivpn]

hi axelnormand ,

Can you provide the your example with js field which may help us

[priyanka813]

I want to do grand total of column " Sum(Gold) " and set it at bottom of that column.

[priyanka813]

I found out that using floating row at bottom.

[prseshad]

Hi, this doesn't look like it ever made it into the production release? This would be useful for us as well but groupSuppressGroupColumn does not appear in the docs.