jqGrid Subgrid data not showing up

Question

I have seen the same question being asked but none of them contained an answer that I could use. I am using jqgrid 4.4. The main grid loads data fine, in the subgrid I can see the response from my java controller but not sure how to get it to show up.

function(){ 
        jQuery("#subGrid").jqGrid({ 
            url: CONTEXT_ROOT+"/cartonPremium", 
            id:'gridtable', 
            datatype: "json", 
            height: 190, 
            jsonReader : {
                       root: 'gridModel', 
                       page: 'page',
                       total: 'total',
                       records: 'records',
                       repeatitems: false,      
                       id: '0'                     
             },              
            colNames:['idPremium','Name','Week', 'Departure Region' ],
            colModel:[ 
            {name:'idPremium',hidden:false, width:100},
            {name:'name',index:'name', width:300}, 
            {name:'sequence',index:'sequence', width:90}, 
            {name:'departureRegion',index:'departureRegion',width:100} 
            ], 
            hidegrid: false,
            rowNum:20, 
            rowList:[20,40,80], 
            pager: '#psubGrid', 
            sortname: 'name', 
            viewrecords: true, 
            sortorder: "desc", 
            multiselect: false, 
            sortable: true,
            autowidth: false,
            pagerButtons:true,
            navigator:true,
            //loadonce: true,
            altRows: true,
            viewsortcols: [true,'vertical',true],
            subGrid: true,
            // define the icons in subgrid 
            subGridOptions: { 
                "plusicon" : "ui-icon-triangle-1-e", 
                "minusicon" : "ui-icon-triangle-1-s", 
                "openicon" : "ui-icon-arrowreturn-1-e"//, 
                //expand all rows on load 
                //"expandOnLoad" : true 
            }, 
            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>"); 

                jQuery("#"+subgrid_table_id).jqGrid({ 
                    url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id, 
                    datatype: "json", 
                    colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
                    colNames:['idCasePackOptions'],
                    colModel: [ 
                        {name:'idCasePackOptions', width:170,hidden:false}      
                    ], 
                    rowNum:8, 
                    pager: pager_id, 
                    sortname: 'idCasePackOptions', 
                    sortorder: "asc", 
                    sortable: true,
                    height: 400 
                }); 
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false}); 
            }   
        }
    );
    jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}

);

Here is response from server

{"total":1,"page":1,"gridModel":[{"idCasePackOptions":1},{"idCasePackOptions":2},{"idCasePackOptions":3},{"idCasePackOptions":4},{"idCasePackOptions":5},{"idCasePackOptions":6}],"records":6,"rows":8}

Help!! What am I missing?

Answer 1

Your data in the subgrid will not be displayed (as well) if one of your given functions do not exist. So if you make a typo empty lines will be displayed:

afterSave: ReloadSubGrid, onError: UpdateFailed, delOptions:...
...
function ReloadSbuGrid(rowid, response) {
    ...
}

Typo: ReloadSbuGrid should have been ReloadSubGrid

Answer 2

I finally got it to working...yipeee!!! the magic that was missing from the subgrid

jsonReader: {
  root: 'gridModel',
  repeatitems: false
}

So the working version looks like this

$(document).ready(
function(){ 
        jQuery("#subGrid").jqGrid({ 
            url: CONTEXT_ROOT+"/cartonPremium", 
            id:'gridtable', 
            datatype: "json", 
            height: '100%' ,
            mtype: 'POST',
            jsonReader : {
                       root: 'gridModel', 
                       page: 'page',
                       total: 'total',
                       records: 'records',
                       repeatitems: false,      
                       id: '0'                
             }, 
            colNames:['idPremium','Name','Week' ],
            colModel:[ 
            {name:'idPremium',hidden:false, width:100},
            {name:'name',index:'name', width:300}, 
            {name:'sequence',index:'sequence', width:90}
            ], 
            hidegrid: false,
            rowNum:20, 
            rowList:[20,40,80], 
            pager: '#psubGrid', 
            sortname: 'name', 
            viewrecords: true, 
            sortorder: "desc", 
            multiselect: false, 
            sortable: true,
            autowidth: false,
            pagerButtons:true,
            navigator:true,
            //loadonce: true,
            altRows: true,
            viewsortcols: [true,'vertical',true],
            subGrid: true,
            // define the icons in subgrid 
            subGridOptions: { 
                "plusicon" : "ui-icon-triangle-1-e", 
                "minusicon" : "ui-icon-triangle-1-s", 
                "openicon" : "ui-icon-arrowreturn-1-e",
                "reloadOnExpand" : true
            }, 
            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>"); 

                jQuery("#"+subgrid_table_id).jqGrid({ 
                    url:CONTEXT_ROOT+"/premiumCasePackOption?rowId="+row_id, 
                    datatype: "json", 
                    mtype: 'POST',
                    colNames:['idCasePackOptions','cypharecommended','distributorapproved', 'height', 'length','statuscode','weight','width'],
                    colModel: [ 
                        {name:'idCasePackOptions', width:170,hidden:false}, 
                        {name:'cypharecommended',index:'cypharecommended', width:170},
                        {name:'distributorapproved',index:'distributorapproved', width:170},
                        {name:'height',index:'height', width:100},
                        {name:'length',index:'length', width:80, align:"right"},
                        {name:'statuscode',index:'statuscode', width:90, align:"right"},        
                        {name:'weight',index:'weight', width:100,align:"right"},        
                        {name:'width',index:'width', width:100}     
                    ], 
                    rowNum:8, 
                    pager: pager_id, 
                    sortname: 'idCasePackOptions', 
                    sortorder: "asc",
                    viewrecords: true, 
                    sortable: true,
                    height: '100%' ,
                    autowidth: true,
                    jsonReader: {
                        root: 'gridModel',
                        repeatitems: false
                    }

                }); 
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false}); 
            }
        }
    );
    //jQuery("#subGrid").jqGrid('navGrid','#psubGrid',{add:false,edit:false,del:false});
}

);