jQuery Grid Plugin - jqGrid

This is perhaps the most awesome javascript table plugin out there.  Great job!

I am having trouble with local sorting of a parent grid when a subgrid is currently open.  Both the parent grid and the subgirds are of the datatype, 'jsonstring'.  Therefore, when you call sortGrid or click the header of the grids, it wil do local sorting as opposed to server-side sorting.

When the above scenario occurs, i.e. attempting to sort the parent grid while a subgrid is open, it will cause an inifinit loop on the subgrid, and you will see multiple subgrids of subgrids until the browser (in my case, Firefox) crashes and no longer responds.

I took the subgrid as grid example and modified it to use json strings so that it can to local sorting.  The following is my configuration:

var jsonstring = '{ total: "1", page: "1", records: "10", rows: [ {r_serviceName:"MediaService2_0", r_deploymentName:"pubwsv2_axis2", amount:"124", tax:"123", total:"1234", note:"somenote" }, {r_serviceName:"LookupService", r_deploymentName:"pubwsv2_lookup", amount:"124", tax:"123", total:"1234", note:"somenote" }, {r_serviceName:"IdentityPointService", r_deploymentName:"bamwsv2_axis2", amount:"236", tax:"95", total:"654", note:"somenote" }  ] }';
var subjsonstring = '{ total: "1", page: "1", records: "10", rows: [ {sub_r_serviceName:"MediaService2_0", sub_r_deploymentName:"pubwsv2_axis2", sub_amount:"124", sub_tax:"123", sub_total:"1234", sub_note:"somenote" }, {sub_r_serviceName:"LookupService", sub_r_deploymentName:"pubwsv2_lookup", sub_amount:"124", sub_tax:"123", sub_total:"1234", sub_note:"somenote" }, {sub_r_serviceName:"IdentityPointService", sub_r_deploymentName:"bamwsv2_axis2", sub_amount:"236", sub_tax:"95", sub_total:"654", sub_note:"somenote" }  ] }';

jQuery("#list2").jqGrid({
    datastr: jsonstring,
    datatype: "jsonstring",
    colNames:['Service Name','Deployment Name', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'serviceName',index:'r_serviceName', width:150},
        {name:'deploymentName',index:'deploymentName', width:140},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', sorttype:'float', formatter:'number', width:80, align:"right"},
        {name:'tax',index:'tax', sorttype:'float', formatter:'number', width:80, align:"right"},
        {name:'total',index:'total', sorttype:'float', formatter:'number', width:80, align:"right"},
        {name:'note',index:'note', width:150, sortable:false} ],
    height:600,
    rowNum:20,
    rowList:[20,40,60],
    imgpath: gridimgpath,
    pager: jQuery('#pager2'),
    sortname: 'amount',
    loadonce: true,
    viewrecords: true,
    search: true,
    sortorder: "asc",
    subGrid: true,
    caption: "Grid as Subgrid",
    onSortCol: function (index, colIndex, sortorder)
    {
        //alert(index + " " + colIndex + " sortorder: " + sortorder);
    },
    jsonReader:
    {
        repeatitems:false
    },
    subGridRowExpanded: function(subgrid_id, row_id)
    {
        var subgrid_table_id, pager_id;
        subgrid_table_id = subgrid_id+"_t";
        pager_id = "p_"+subgrid_table_id;
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
       
        //alert(jQuery("#list2").getRowData(row_id)["amount"]);
        //alert(row_id);
        jQuery("#"+subgrid_table_id).jqGrid(
        {
            datastr: subjsonstring,
            datatype: "jsonstring",
            colNames:['Service Name','Deployment Name', 'Client', 'Amount','Tax','Total','Notes'],
            colModel: [
                {name:'sub_r_serviceName',index:'sub_r_serviceName', width:150},
                {name:'sub_r_deploymentName',index:'sub_r_deploymentName', width:140},
                {name:'sub_name',index:'sub_name asc, invdate', width:100},
                {name:'sub_amount',index:'sub_amount', sorttype:'float', formatter:'number', width:80, align:"right"},
                {name:'sub_tax',index:'sub_tax', sorttype:'float', formatter:'number', width:80, align:"right"},
                {name:'sub_total',index:'sub_total', sorttype:'float', formatter:'number', width:80, align:"right"},
                {name:'sub_note',index:'sub_note', width:150, sortable:false} ],
            rowNum:20,
            pager: pager_id,
            imgpath: gridimgpath,
            jsonReader:
            {
                repeatitems:false
            },
            loadonce: true,
            height: '100%'
        }).navGrid("#"+pager_id,{edit:false,add:false,del:false})
    },