title: jqgrid Display Grid as Subgrid by separate Button
body: <p>I have a Problem to Display a Grid as a Subgrid using an extra button.
  I tried to copy the code from the</p>
  
  <pre><code>subGridRowExpanded:
  </code></pre>
  
  <p>Event.
  But the Grid is doing something nasty, before the subGridRowExpanded is fired.
  If I use the + button at the left side the grid is displayed properly. If I now push my created button, the subGrid is reloaded too. I used an alert to stop the function at the beginning and I saw the table is inserted before the subGridRowExpanded.</p>
  
  <p>So I guess I'm missing a function before the Event. Maybe I'm using a wrong Event for my task.</p>
  
  <p>Here is my Code which is from the Basic Example. The function which generates the Button:</p>
  
  <pre><code>gridComplete: function(){ 
      var ids = jQuery("#task").jqGrid('getDataIDs');
      var running_task_ids=get_running_task_id_ajax();
      for(var i=0;i &lt; ids.length;i++){ 
          var cl = ids[i]; 
          start = "&lt;input style='height:22px;width:50px;' type='button' value='Start' onclick=\"start_stop_task('"+cl+"','start');\" /&gt;"; 
          stop = "&lt;input style='height:22px;width:50px;' type='button' value='Stop' onclick=\"start_stop_task('"+cl+"','stop');\" /&gt;";
          se = "&lt;input style='height:22px;width:50px;' type='button' value='Save' onclick=\"jQuery('#task').saveRow('"+cl+"');\" /&gt;"; 
          //ce = "&lt;input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#task').restoreRow('"+cl+"');\" /&gt;"; 
          co = "&lt;input style='height:22px;width:70px;' type='button' value='Comment' onclick=\"foobar('task_"+cl+"',"+cl+");\" /&gt;"; 
         }
  }
  </code></pre>
  
  <p>The function which is called (just copied from the Grid as subgrid Example):</p>
  
  <pre><code>function foobar(subgrid_id, row_id) {
  // klappt noch nicht!
  
  alert(subgrid_id+":"+row_id);
  // we pass two parameters 
  // subgrid_id is a id of the div tag created whitin a table data 
  // the id of this elemenet is a combination of the "sg_" + id of the row
   // the row_id is the id of the row 
   // If we wan to pass additinal parameters to the url we can use 
   // a method getRowData(row_id) - which returns associative array in type name-value 
   // here we can easy construct the flowing 
   var subgrid_table_id, pager_id;
    subgrid_table_id = subgrid_id+"_t";
    pager_id = "p_"+subgrid_table_id;
    $("#"+subgrid_id).html("&lt;table id='"+subgrid_table_id+"' class='scroll'&gt;&lt;/table&gt;&lt;div id='"+pager_id+"' class='scroll'&gt;&lt;/div&gt;"); 
    jQuery("#"+subgrid_table_id).jqGrid({ 
        url:"ajax/listtasktime/id/"+row_id, 
        onSelectRow: 
            function(id){ 
              if(id &amp;&amp; id!==lastsel2){ 
                      jQuery('#'+subgrid_table_id).jqGrid('restoreRow',lastsel2);  
                      //jQuery('#task').jqGrid('editRow',id,true,pickdates_e); 
                      jQuery('#'+subgrid_table_id).jqGrid('editRow',id,true); 
                      lastsel2=id; } 
        },
  
        datatype: "xml", 
        colNames: ['ID','START','END', 'Time'], 
        colModel: [ 
                   {name:"ID",index:"num",width:80,key:true}, 
                   {name:"START",index:"item",width:180,editable: true}, 
                   {name:"END",index:"qty",width:180,align:"right",editable: true},
                   {name:"TIME",index:"qty",width:180,align:"right"} 
                   ], 
                   rowNum:20, 
                   pager: pager_id, 
                   sortname: 'num', 
                   sortorder: "asc", 
                   height: '100%' 
                    }); 
    jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}) 
    alert("done");    
    }
  </code></pre>