JqGrid - SubGrid not showing up

I am using the JqGrid-subGrid option in my MVC project to get a nested gridview look. I was able to populate data in the parent grid, i have enabled the subgrid and given the subGrid Url for poplulating innergrid data. Now the problem,subgrid is not showing up when the page is executed, not only that, the subGridUrl: method is not getting called. Can anyone help me to figure out the reason behind it? Below is my code :

jQuery(document).ready(function () {

     jQuery("#list").jqGrid({

         url: '/jqgrid/DynamicGridData/',

         datatype: 'json',

         mtype: 'GET',

         colNames: ['SurveyQnGrpId', 'SurveyQnGroup1'],

         colModel: [
              { name: 'SurveyQnGrpId', index: 'SurveyQnGrpId', width: 40, align: 'left' },

              { name: 'SurveyQnGroup1', index: 'SurveyQnGroup1', width: 400, 开发者_JAVA百科align: 'left'}],

            pager: jQuery('#pager'),

         rowNum: 10,

         rowList: [5, 10, 20, 50],

         sortname: 'SurveyQnGrpId',

         sortorder: "SurveyQnGroup1",

         viewrecords: true,

         caption: 'My first grid',

            subGrid: true,

            subGridUrl: '/jqgrid/InnerGridData/',

         subGridModel: [
            {

                name: ['SurveyQnGrpId','SurveyQnId', 'SurveyQn', 'SurveyQnCategory', 'MandatoryQn','RadioOption3'],

                width: [10,10, 100, 10, 10,10],

                align: ['left', 'left', 'left', 'left'],

                params: ['SurveyQnGrpId']

            }]

     });
 });

Thanks in advance, Ancy

I found it easier to dump the built-in subgrid and use their "subgrid-as-grid" example for inserting a brand new grid on the fly:

From their wiki:

subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
   var subgrid_table_id;
   subgrid_table_id = subgrid_id+"_t";
   jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
   jQuery("#"+subgrid_table_id).jqGrid({
      url:"subgrid.php?q=2&id="+row_id,
      datatype: "xml",
      colNames: ['No','Item','Qty','Unit','Total'],
      colModel: [
        {name:"num",index:"num",width:80,key:true},
        {name:"item",index:"item",width:130},
        {name:"qty",index:"qty",width:80,align:"right"},
        {name:"unit",index:"unit",width:80,align:"right"},           
        {name:"total",index:"total",width:100,align:"right",sortable:false}
      ],
      height: 100%,
      rowNum:20,
      sortname: 'num',
      sortorder: "asc"
   });

you need to add

subGrid: true,
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: true,
            cell: "cell",
            id: "id",
            subgrid: {
                root: "rows",
                repeatitems: true,
                cell: "cell",
                id: "id"
            }
        },

and you also need to download new jqgrid SRC directory and select all components as i think there are dependencies