Why does my grouping in jqgrid behave differently?

Continuing from previous example I got some more data into my json, so pagination is enabled, but in the grouping env (previously envVariable done by Oleg) before going to next page it shows 3 items and after coming back to the 1st page it shows 4 items, also env grouping shifts to top row. Here i am posting my screens shots as well as my code and json.

before going to next page (Note: 3 items in env, also it is at the bottom)

after hitting the next page, when i come back to 1st page (Note: Now it is 4 items in env, also it is at the top)

My code

$('#compareContent').empty();
    $('<div id="compareParentDiv" width="100%">'+
      '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
            '<div id="gridpager3"></div></div>')
    .appendTo('#compareContent');

    var gridDiff = $("#list2");
    gridDiff.jqGrid({
        datastr: myJson,
        datatype: "jsonstring",
        colNames: ['KeyName', 'SubCategory', starheader, header1,'isEqual'],
        colModel: [
            { name: 'elementName', index: 'elementName', key: true, width: 220 },
            { name: 'subCategory', index: 'subCategory', width: 1 },
            { name: 'firstValue', index: 'firstValue', width: 300, jsonmap:'attribute.0.firstValue' },
            { name: 'secondValue', index: 'secondValue', width: 300,jsonmap:'attribute.0.secondValue' },
            { name: 'isEqual', index: 'isEqual', width: 1,hidden:true}
        ],
        pager: '#gridpager3',
        rowNum: 10,
        scrollOffset:0,
        viewrecords: true,
        jsonReader: {
            repeatitems: false,
            page: function(){return 1;},
            root: "response"
        },
        //rownumbers: true,
        //multiselect: true,
        //height: "320",
        //autowidth:true,
        height: '320',
        autowidth:true,
        grouping: true,

        groupingView: {
            groupField: ['subCategory'],
            groupOrder: ['desc'],
            groupDataSorted : true,
            groupColumnShow: [false],
            //groupCollapse: true,
            groupText: ['<b>{0} - {1} Item(s)</b>']

        },

        loadComplete: function() {
            var i, names=this.p.groupingView.sortnames[0], l = names.length;
            for (i=0;i<l;i++) {
                if (names[i]==='env') {
                    $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
                } else {
                    // hide the grouping row
                    $('#'+this.id+"ghead_"+i).hide();
                }
            }

            var i, l, data = this.p.data, rows = this.rows, item;

            l = data.length;
            for (i=0;i<l;i++) {
                item = data[i];
                if (!item.isEqual) {
                    $(rows.namedItem(item._id_))
                        .css({
                            "background-color": "#FFE3EA",
                            "background-image": "none"
                        });
                }
            }

        }
    });

    gridDiff.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: true });

my Json object

var myJson={
        "response": [
                             {
  "id": "0",
  "elementName": "osname",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "name": "osname",
      "firstValue": "Linux\u000a",
开发者_如何学Go      "secondValue": "Linux\u000a"
    }
  ]
},
{
  "id": "1",
  "elementName": "hostname",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "name": "hostname",
      "firstValue": "estilo\u000a",
      "secondValue": "buckeye\u000a"
    }
  ]
},
{
  "id": "2",
  "elementName": "release",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "name": "release",
      "firstValue": "1.6.18-128.el5\u000a",
      "secondValue": "2.6.18-128.el5\u000a"
    }
  ]
},
{
  "id": "3",
  "elementName": "version",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "name": "version",
      "firstValue": "Red Hat Enterprise Linux Server release 5.3 (Tikanga)\u000a",
      "secondValue": "Red Hat Enterprise Linux Server release 5.3 (Tikanga)\u000a"
    }
  ]
},

{
  "id": "8",
  "elementName": "maxfilesperproc",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "name": "maxfilesperproc",
      "firstValue": "32\u000a",
      "secondValue": "32\u000a"
    }
  ]
},
{
  "id": "9",
  "elementName": "maxthreadsperproc",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "name": "maxthreadsperproc",
      "firstValue": "2000000\u000a",
      "secondValue": "2000000\u000a"
    }
  ]
},
{
  "id": "10",
  "elementName": "mempagesize",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "name": "mempagesize",
      "firstValue": "4096\u000a",
      "secondValue": "4096\u000a"
    }
  ]
},
{
  "id": "11",
  "elementName": "TERM",
  "subCategory": "env",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "firstValue": "xterm",
      "secondValue": "xterm"
    }
  ]
},
{
  "id": "12",
  "elementName": "SSANUL",
  "subCategory": "env",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "firstValue": "/dev/null",
      "secondValue": "/dev/null"
    }
  ]
},
{
  "id": "13",
  "elementName": "SSA_LIHOST",
  "subCategory": "env",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "firstValue": "estilo:45682",
      "secondValue": "buckeye:45682"
    }
  ]
},
{
  "id": "14",
  "elementName": "SSH_CLIENT",
  "subCategory": "env",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "attribute": [
    {
      "firstValue": "11.65.6.131 2138 22",
      "secondValue": "10.65.6.131 2138 22"
    }
  ]
}
                         ]
                     },grid3;

What could be a possible solution?

---

You will not have the described problem if you define subCategory property (which you you for grouping) in all the data items. In previous example you used subCategory:"system". If one adds the property to all items which has undefined subCategory you will have the following demo which has no problems.