jQuery().ready(function (){

jQuery("#list1").jqGrid({

colNames:['Username','Email', 'Rank', 'Status', 'Join Date', 'Login Date', 'Href'],

colModel:[

{name:'username',index:'username', sorttype: 'text', width:90, editable:true},

{name:'email', index:'email', width:90, editable:true, editrules:{required: true, email: true}},

{name:'rank',index:'rank', width:90, editable:true, edittype: 'select', editoptions: { value: "admin:Admin; user:User" }, editrules:{required:true}},

{name:'activate',index:'activate', width:100, editable:true, edittype: 'checkbox', editoptions: { value: '1:0' }, editrules:{required:true}},

{name:'join_date',index:'join_date', width:80, editable:false, align:"right"},

{name:'last_login_date',index:'last_login_date', width:100, editable:false},

{name:'href',index:'href', hidden:true, editable:true, width:100}

],

datatype: 'local',

altRows: false,

autowidth: true,

height: 205,

scroll: false,

scrollrows: true,

rowNum:10,

pginput: false,

rowList: false,

pager: jQuery('#pager1'),

sortname: 'db_address',

viewrecords: true,

loadonce: true,

forceFit: true,

loadui: 'block',

sortorder: "desc",

caption:"Users",

editurl:"include/jgrid_dummy.php",

//subgrid settings

subGrid: true,

subGridRowExpanded: function(subgrid_id, row_id) {

subgrid_table_id = subgrid_id + 'row_id';

subgrid_pager_id = subgrid_id + 'row_id' + 'pager';

jQuery("#"+subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + subgrid_pager_id + "'></div>");

jQuery("#"+subgrid_table_id).jqGrid({

datatype: 'local',

colNames: ['Select','Insert','Update','Delete', 'Href'],

colModel: [

{name:"select", index:"select", sortable: false, editable:true, width:20, align:"center", edittype: 'checkbox', editoptions: { value: '1:0' }},

{name:"insert", index:"insert", sortable: false, editable:true, width:20, align:"center", edittype: 'checkbox', editoptions: { value: '1:0' }},

{name:"update", index:"update", sortable: false, editable:true, width:20, align:"center", edittype: 'checkbox', editoptions: { value: '1:0' }},

{name:"delete_act", index:"delete_act", sortable: false, editable:true, width:20, align:"center", edittype: 'checkbox', editoptions: { value: '1:0' }},

{name:'href',index:'href', hidden:true, sortable: false, editable:true, width:100}

],

datatype: 'local',

altRows: false,

autowidth: true,

height: 25,

scroll: false,

scrollrows: true,

rowNum:10,

pginput: false,

rowList: false,

pager: jQuery('#'+subgrid_pager_id),

sortname: 'db_address',

viewrecords: true,

loadonce: true,

forceFit: true,

loadui: 'block',

pgbuttons: false,

sortorder: "desc",

caption:"DB Permissions",

editurl:"include/jgrid_dummy.php"

});

FetchUserPerm(row_id, subgrid_table_id);

//pager2 (subgrid)

jQuery("#"+subgrid_table_id).jqGrid('navGrid','#'+subgrid_pager_id,

{edit:true, add:false, del:false, refresh: false, search: false}, //options

{height:180,

reloadAfterSubmit:false,

closeAfterEdit: true,

checkOnUpdate: true,

checkOnSubmit: true,

beforeShowForm: function(form_id){

//$("#password").attr("size","40");

},

afterComplete: function(response, postdata, formid){

var su = jQuery("#list1").getGridParam("selrow");

SaveUserPerm(su, postdata);

}

} // edit options

);

}

});

jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='pager2'></div>");

and then

jQuery("#" + subgrid_table_id).jqGrid('navGrid','#pager2',

{edit:true, add:true, del:true, refresh: false, search: true}, [..........]

I copied pasted the navigation bar from my main grid and there works fine. But in the subgrid is not being displayed! Thanks in advance for your help….!!!!

Edited: Just to be clearer... I added the pager: jQuery('#pager2') in the subgrid configuration and then the navigation bar was displayed but not the buttons (add, edit, delete etc).