jqGrid Subgrid data not showing up - jqgrid

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

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});
}
);

Answer 2

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