Search code examples
jqgridsubgrid

JQGrid : subgrid as a GRID with a navigation bar


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!


Solution

  • 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})
                }....