jQuery Grid Plugin - jqGrid

Hi,

 

I have a jqGrid table with rowspan attribute set.It renders fine, if I am on the same page.As soon as I change the page,rendering is lost i.e. doesn't display data correctly.Please help me to achieve rowspan across pages.

 

My code :

 $(function () {
        
         //]]>
    
    
            'use strict';
var prevCellVal = { cellId: undefined, value: undefined };
var prevCell1Val = { cellId: undefined, value: undefined };
var prevCell2Val = { cellId: undefined, value: undefined };
            var mydata =[{
    "email": "abc.def@abc.com",
    "name": "abc, def",
    "address": "USA"
    
},
{
    "email": "abc.dFef@abc.com",
    "name": "abSFc, def",
    "address": "USA"
},
{
    "email": "awwwwwwwwwwwwwbc.def@abc.com",
    "name": "abc, def",
    "address": "USA"
},
{
    "email": "abwwwwwwwwwwwwDc.def@abc.com",
    "name": "aDbc, def",
    "address": "UK"
},
{
    "email": "FEabc.def@abc.com",
    "name": "FDabc, def",
    "address": "UK"
},
{
    "email": "abDc.def@abc.com",
    "name": "abc, def",
    "address": "UK"
},
{
    "email": "aDbc.def@abc.com",
    "name": "aDbc, def",
    "address": "UK"
},
{
    "email": "abc.def@abc.com",
    "name": "abc, def",
    "address": "USA"
},
{
    "email": "abwefwec.def@abc.com",
    "name": "abwqewfdec, def",
    "address": "USA"
},
{
    "email": "awfwfwbc.def@abc.com",
    "name": "awvferbc, def",
    "address": "USA"
},
{
    "email": "awwwwwwwwwwwwwwwwbc.def@abc.com",
    "name": "abwvfwc, def",
    "address": "USA"
}];
                       
            $("#list").jqGrid({
                datatype: 'local',
                data: mydata,
                colNames: ['Email', 'Name', 'Address'],
               colModel: [
        { name: 'email', width: 70, align: 'center',
         
                        cellattr: function (rowId, val, rawObject, cm, rdata) {
                            var result;

                            if (prevCellVal.value == val) {
                                result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"';
                            }
                            else {
                                var cellId = this.id + '_row_' + rowId + '_' + cm.name;

                                result = ' rowspan="1" id="' + cellId + '"';
                                prevCellVal = { cellId: cellId, value: val };
                            }

                            return result;
                        }
        },
        { name: 'name', width: 80, align: 'center',

                        cellattr: function (rowId, val, rawObject, cm, rdata) {
                            var result;

                            if (prevCell1Val.value == val) {
                                result = ' style="display: none" rowspanid="' + prevCell1Val.cellId + '"';
                            }
                            else {
                                var cellId = this.id + '_row_' + rowId + '_' + cm.name+$('#list').jqGrid.getGridParam('page');

                                result = ' rowspan="1" id="' + cellId + '"';
                                prevCell1Val = { cellId: cellId, value: val };
                            }

                            return result;
                        }
                     },
        { name: 'address', width: 90,

                       cellattr: function (rowId, val, rawObject, cm, rdata) {
                            var result;

                            if (prevCell2Val.value == val) {
                                result = ' style="display: none" rowspanid="' + prevCell2Val.cellId + '"';
                            }
                            else {
                                var cellId = this.id + '_row_' + rowId + '_' + cm.name+$('#list').jqGrid.getGridParam('page');

                                result = ' rowspan="1" id="' + cellId + '"';
                                prevCell2Val = { cellId: cellId, value: val };
                            }

                            return result;
                        }}
       
    ],
           rowList:[5,10,20],
rowNum:5,
           pager: '#pager',
    
    gridview: true,
    viewrecords: true,
    height: '100%',
    caption: 'Grid with rowSpan attributes',

    beforeSelectRow: function () {
        return false;
    },
   gridComplete: function () {
                var grid = this;

                $('td[rowspan="1"]', grid).each(function () {
                    var spans = $('td[rowspanid="' + this.id + '"]', grid).length + 1;

                    if (spans > 1) {
                        $(this).attr('rowspan', spans);
                    }
                });
            }
});
//$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,reload:true}).trigger('reloadGrid');;
    // $('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
});
  

 

HTML is :

....

<body>
<table id="list"><tr><td /></tr></table>
<div id="pager"></div>
</body>

...

 

Please help me with this.Appreciate your help!

 

Thanks,

SS