How can I make to show the subgrids from JQgrid by default?

Question

TypeError: this.each is not a function

return this.each(function () {this is my code from the subgrid sequence:

subGrid : true, 

        subGridRowExpanded: function(subgrid_id, row_id) {
          //var projectIdRow = $('#list2').jqGrid('getCell',rowId,'projectid');
          var subgrid_table_id;
          subgrid_table_id = subgrid_id+"_t";
          $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table>");
          $("#"+subgrid_table_id).jqGrid({
            url:"/taskuri/subGrid/?id="+row_id,
            datatype: "json",
            colNames: ['SubTask',' ','Pri','Responsabil','Alocator','Alocat','Deadline','Estimat','Lucrat',' '],
            colModel: [ 
              {name:"SubTask",index:"SubTask",width:'687%',align:"left",sortable:false},
              {name:'finished',index:'finished', width:'40%',sortable:false},
              {name:"Pri",index:"Pri",width:'56%', sortable:true},
              {name:"Responsabil",index:"Responsabil",width:'128%',sortable:false},
              {name:"Alocator",index:"Alocator",width:'130%',sortable:false},
              {name:"Alocat",index:"Alocat",width:'110%',sortable:false},
              {name:"Deadline",index:"Deadline",width:'110%',sortable:false},
              {name:"Estimat",index:"Estimat",width:'76%',align:"right",sortable:false},
              {name:"Lucrat",index:"Lucrat",width:'90%',align:"right"},
              {name:"Delete",index:"Delete",width:'90%',align:"right"},
            ],
            height: '100%',
            rowNum:20,
           });
        }, 

I want to things. Firstly to show the subgrid by default(when i access the page). Secondly to no dot displays the subgrid if there is no data there. How can I do that? Below I upload an image to see how it displays, if if there is no data. thx

I tried this method :

gridComplete: function(){ 
               var grid = $("#list2");
               var svi_id = grid.jqGrid('getDataIDs');
               $.each(svi_id, function (index, rowId) {
                    $(this).jqGrid.expandSubGridRow(rowId); 
// or grid.jqGrid.expandSubGridRow(rowId); 

               });
        },

and the result is an error : TypeError: this.each is not a function return this.each(function () { { (firebug). What is wrong ?

Answer 1

Check for expandSubGridRow.... you can do this in your loadcomplete of the parent grid !!

    loadComplete: function () {
        var timeOut = 50;
        var rowIds = $("#list").getDataIDs();
        $.each(rowIds, function (index, rowId) {
            setTimeout(function () {
                $("#list").expandSubGridRow(rowId);
            }, timeOut);
            timeOut = timeOut + 200;
        });
    }

Answer 2

this is the right code to display by default the subgrids

 gridComplete: function(){ 
                   var grid = $("#list2");
                   var svi_id = grid.jqGrid('getDataIDs');
                   $.each(svi_id, function (index, rowId) {
                        grid.jqGrid('expandSubGridRow',rowId);
                   });
            },