jqGrid subgrid is not expanding - jqgrid

Question

I've followed the way shown in www.trirand.com / blog / jqgrid / jqgrid.html
but the subgrid was not expanded
This is my jqgrid code:
jQuery("#list").jqGrid({
url:"../ajax_request/user_table_request.php",
datatype: "json",
mtype : "post",
autoheight:true,
autowidth:true,
colNames:[
"Kode Jabatan Pengguna",
"Id Pengguna",
"Username",
"Nama Pengguna",
"Email",
"Id Jabatan",
"Nama Jabatan"
],
colModel:[
{
name:"id",
index:"kode_jabatan",
align: "center",
width:15,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
name:"id_pengguna",
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
width:20,
editable:false,
editoptions:{readonly:true,size:20},
hidden:false
},
{
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
name:"id_jabatan",
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
}
],
rowNum:10,
rowList:[10,20,30,40,50,60,70,80,90,100],
pager: '#pager',
sortname: 'kode_jabatan',
sortorder: "asc",
subGrid : true,
subGridUrl: '../ajax_request/grid_jabatan_request.php',
subGridModel: [
{
name : ['Id Jabatan','Jabatan'],
width : [55,200],
params:['kode_jabatan']
}
],
scrollbar: true
});
jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:false,del:false,search:false});
jQuery("#list").jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
what am I doing wrong?
Anybody have any ideas?
I confused subgrid.js and grid.subgrid.js are they same?

Answer 1

You should define name property for all columns of jqGrid. Currently 4 from 7 columns has no name.
You should not use blanks in the name property of colModel or subGridModel. You use currently 'Id Jabatan' in the name property of subGridModel.
The data for the subgrid will be provided by url defined by subGridUrl parameter. You should verify that it receive the request and answer with crrect JSON data.

Answer 2

When the main grid loads, all the subgrids will automatically be expanded with the following code:
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
"expandOnLoad" : true,
"reloadOnExpand" : true,
"selectOnExpand" : true
},