jqGrid Mod - Grouping Example

HTML

<script src="https://raw.github.com/mbiasetti/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://raw.github.com/mbiasetti/jqGrid/master/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<table id="grid"></table>
<table id="grid2"></table>

JavaScript

var data = [
    [48803, "DSK1", "", "02200220", "OPEN"],
    [48769, "APPR", "", "77733337", "ENTERED"]
];

var GroupThree = {
    groupField: ['id', 'thingy', 'blank'],
    groupOrder: ['asc', 'asc', 'asc'],
    groupDataSorted: true,
    groupColumnShow: [false, false, false],
    groupCollapse: {
        "enabled": true,
        collapseLevels: [false, true, false]
    }
};

var GroupTwo = {
    groupField: ['id', 'thingy'],
    groupOrder: ['asc', 'asc'],
    groupDataSorted: true,
    groupColumnShow: [false, false],
    groupCollapse: {
        "enabled": true,
        collapseLevels: [true, false]
    }
};

var model = {
    datatype: "local",
    height: 250,
    grouping: true,
    groupingView: GroupThree,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"
    }, {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"
    }, {
        name: 'blank',
        index: 'blank',
        width: 30
    }, {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"
    }, {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"
    }]
};

$("#grid").jqGrid(model);
$("#grid2").jqGrid($.extend({}, model, {
    groupingView: GroupTwo
}));

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
    $("#grid2").jqGrid('addRowData', i + 1, mydata[i]);
}

$("#grid").trigger("reloadGrid");
$("#grid2").trigger("reloadGrid");