javascript - Custom client-side aggregation in jqGrid

Question

This question is similar to Custom aggregation/grouping in jqGrid but a little bit different.

I have the following jqGrid.

It is loaded once and I'd like all of the following functionality to be done client side. The drop down is a selector that changes how to display the data. Say for example I want to display by State, it should just show the State column (I can handle that through showing and hiding the columns), and I'd like it to aggregate/sum the "Number1", "Number2", and "Number3" columns as well. It should look something like this (Hopefully my manual addition is correct).

I'd also need to be able to GET BACK to the first grid though so, 869 needs to broken back out into 285, 489, 95 values for Taylor Ridge, Skokie, Beecher. Is this something that can be handled by jqGrid?

The following is the XML for the first grid, but I do have full control over how this XML is built so I can change that as necessary.

    <?xml version ='1.0' encoding='utf-8'?>
<result>
  <row>
    <cell>1</cell>
    <cell>IL</cell>
    <cell>SPARLAND</cell>
    <cell>32</cell>
    <cell>61</cell>
    <cell>19</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>2</cell>
    <cell>IL</cell>
    <cell>EDWARDS</cell>
    <cell>69</cell>
    <cell>56</cell>
    <cell>2</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>2</cell>
    <cell>IL</cell>
    <cell>SPARLAND</cell>
    <cell>52</cell>
    <cell>30</cell>
    <cell>8</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>2</cell>
    <cell>CA</cell>
    <cell>TAYLOR RIDGE</cell>
    <cell>285</cell>
    <cell>72</cell>
    <cell>15</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>1</cell>
    <cell>CA</cell>
    <cell>SKOKIE</cell>
    <cell>489</cell>
    <cell>60</cell>
    <cell>12</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>1</cell>
    <cell>CA</cell>
    <cell>BEECHER</cell>
    <cell>95</cell>
    <cell>46</cell>
    <cell>17</cell>
    <cell>0</cell>
  </row>
</result>

Answer 1

I find your question interesting. Moreover because you spend almost all your reputation points for the bounty I decided that you really need the solution of the problem. So I made the following demo for you. At the start it displays the full grid without grouping:

With respect of the select element you can choose the grouping column and receive as the result like

or

depend on the choice in the select element. If you choose "No grouping" the original view of the grid will be restored.

For the implementation I used groupSummary with the custom implementation of summaryType.

I recommend you to read the answer additionally which describes how one can customize the summary row of the grouping.

The HTML code of body of the demo is

<fieldset style="float:left" class="ui-widget ui-widget-content ui-corner-all ui-jqgrid">
    <select id="chooseGrouping">
        <option value="">No grouping</option>
        <option value="State">State</option>
        <option value="City">City</option>
        <option value="Level">Level</option>
    </select>
</fieldset>
<div style="clear:left">
    <table id="grid"><tr><td></td></tr></table>
</div>

The corresponding the JavaScript code is below:

var intTemplate = { formatter: 'integer', align: 'right', sorttype: 'int',
        summaryType: 'sum'},
    grouppingTemplate = {
        summaryType: function (val, name, record) {
            if (typeof (val) === "string") {
                return record[name];
            }
            return val;
        }
    },
    $grid = $("#grid");

$grid.jqGrid({
    url: 'CustomGrouping2.xml',
    height: 'auto',
    colModel: [
        { name: 'Level', formatter: 'integer', sorttype: 'int', template: grouppingTemplate },
        { name: 'State', template: grouppingTemplate },
        { name: 'City', template: grouppingTemplate },
        { name: 'Number1', template: intTemplate },
        { name: 'Number2', template: intTemplate },
        { name: 'Number3', template: intTemplate },
        { name: 'Selected', template: intTemplate }
    ],
    cmTemplate: { width: 90 },
    xmlReader: { root: 'result' },
    loadonce: true,
    rowNum: 1000,
    grouping: false,
    groupingView: {
        groupField: ['State'],
        groupSummary: [true],
        groupColumnShow: [true],
        groupText: ['{0}'],
        groupDataSorted: true,
        showSummaryOnHide: true
    },
    loadComplete: function () {
        if (this.p.grouping) {
            $(this).children('tbody').children('tr').each(function () {
                var $tr = $(this);
                if (!$tr.hasClass('jqfoot')) {
                    $tr.hide();
                }
            });
        }
    }
});

$('#chooseGrouping').change(function () {
    var index, count, sel = $('option:selected', this).val(),
        allGroups = ["State", "City", "Level"];
    if (sel === "") {
        $grid.jqGrid('setGridParam', {grouping: false});
        for (index = 0, count = allGroups.length; index < count; index++) {
            $grid.jqGrid('showCol', allGroups[index]);
        }
    } else {
        $grid.jqGrid('setGridParam', {grouping: true, groupingView: {groupField: [sel]}});
        $grid.jqGrid('showCol', sel);
        index = $.inArray(sel, allGroups);
        if (index >= 0) {
            allGroups.splice(index, 1);
            for (index = 0, count = allGroups.length; index < count; index++) {
                $grid.jqGrid('hideCol', allGroups[index]);
            }
        }
    }
    $grid.trigger('reloadGrid');
});