JQGrid : subgrid as a GRID with a navigation bar - jqgrid

Question

I am using JQGrid and displaying subGrid as a JQGRID itself.
I was wondering if there is a way to display the navigation bar for the subgrid too.
I tried following the way its being done for JQGrid, but in vain.
Thanks in advance!

Answer 1

Make sure that in the subGrid jqGRid function you also set the pager property to the pager id in the subgrid
... subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id)
{
var subgrid_table_id;
var 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>");
$("#" + subgrid_table_id).jqGrid({
url:"ListSub/"+ row_id,
datatype: "json",
colNames: ['Street1','Street2','Street3','Zip','Place','Country'],
colModel:
[
{name:"Street1",index:"Street1",width:80,key:true, editable:true},
{name:"Street2",index:"Street2",width:130, editable:true},
{name:"Street3",index:"Street3",width:80,align:"right", editable:true},
{name:"Zip",index:"Zip",width:80,align:"right", editable:true},
{name:"Place",index:"Place",width:100,align:"right", editable:true},
{name:"Country",index:"Country",width:100,align:"right", editable:true}
],
caption: "Offices",
height: "100%",
rowNum:10,
sortname: 'Street1',
sortorder: "asc",
pager:pager_id
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false})
}....

Answer 2

subGrid: true,
subGridRowExpanded: function(ParentGridID, rowid) {
var datagridSub, navGrid;
SubGridID = ParentGridID+"_t";
//alert(rowid);
navGrid = "p_"+datagridSub;
$("#"+ParentGridID).html("<table id='"+SubGridID+"' class='scroll'></table><div id='"+PagerID+"' class='scroll'></div>");
jQuery("#"+SubGridID).jqGrid({
url:'service url'+rowid,
datatype: "json",
type: "GET",
colNames: ['Id','MID','VendorCode1','VendorCode2','Percentage'],
width:700,
colModel: [
{name:"id",index:"id",width:30},
{name:"mid",index:"mid",width:30},
{name:"vendorcode1",index:"vendorcode1",width:40},
{name:"vendorcode2",index:"vendorcode2",width:40},
{name:"percentage",index:"percentage",width:70}
],
jsonReader: {
repeatitems: false, // To Bind the Data in Grid, if it is JSON format.
id: "id",
root: function (obj) { return obj; } // To Bind the Data in Grid.
// page: function () { return 1; },
//total: function () { return 1; },
//records: function (obj) { return obj.length; },
},
rowNum:20,
pager: '#PagerID',
sortname: 'num',
sortorder: "asc",
postData: {id: rowid},
height: '120%',
});
}