title: jqgrid subgrid becomes main grid when clicking on plus icon
body: <p>I'm having problems implementing a jqgrid as subgrid.  When I click on the plus icon, the subgrid becomes the main and the main dissapears. The data part seems ok as the children are matching every row in main grid. Child grid seems to occupy main grid div and loses it's own div.
  Here's the code:</p>
  
  <pre><code>            &lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqGridTest1.aspx.cs" Inherits="JQGridDemo.JqGridTest1" %&gt;
              &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
              &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
              &lt;head id="Head1" runat="server"&gt;
              &lt;title&gt;&lt;/title&gt;
              &lt;link href="JQGridReq/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" /&gt;
              &lt;link href="JQGridReq/ui.jqgrid.css" rel="stylesheet" type="text/css" /&gt;
              &lt;script src="JQGridReq/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="JQGridReq/jquery.json-2.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="JQGridReq/jquery-ui-1.8.2.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="JQGridReq/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="JQGridReq/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
                  $(document).ready(function () {
                      $.extend($.jgrid.defaults,
              { datatype: 'json' },
              { ajaxGridOptions: { contentType: "application/json",
                  success: function (data, textStatus) {
                      if (textStatus == "success") {
                          var thegrid = $("#grdParam")[0];
                          thegrid.addJSONData(data.d);
                          thegrid.grid.hDiv.loading = false;
                          switch (thegrid.p.loadui) {
                              case "disable":
                                  break;
                              case "enable":
                                  $("#load_" + thegrid.p.id).hide();
                                  break;
                              case "block":
                                  $("#lui_" + thegrid.p.id).hide();
                                  $("#load_" + thegrid.p.id).hide();
                                  break;
                          }
                      }
                  }
              }
              });
                      jQuery("#grdParam").jqGrid({
                          url: 'JqGridTest1.aspx/GetDataTableGroup',
                          datatype: 'json',
                          mtype: 'POST',
                          height: 250,
                          colNames: ['GroupID', 'SubGroup', 'ParameterName', 'Value', 'Value2', 'UserInsert', 'InsertDate', 'UserUpdate', 'UpdateDate', 'Active'],
                          colModel: [{
                              name: 'GroupID',
                              index: 'GroupID',
                              width: 40,
                              editable: true,
                              editoptions: {
                                  readonly: true,
                                  size: 10
                              },
                              editrules: { edithidden: true }
                          },
              {
                  name: 'SubGroup',
                  index: 'SubGroup',
                  width: 40,
                  editable: true,
                  editoptions: {
                      readonly: true,
                      size: 10
                  },
                  align: "left",
                  size: 100,
                  editrules: { edithidden: true }
              },
              {
                  name: 'ParameterName',
                  index: 'ParameterName',
                  width: 100,
                  align: "left",
                  editable: true,
                  size: 100
              },
              {
                  name: 'Value',
                  index: 'Value',
                  width: 100,
                  align: "left",
                  editable: true,
                  size: 100
              },
              {
                  name: 'Value2',
                  index: 'Value2',
                  width: 100,
                  align: "left",
                  editable: true,
                  size: 100
              },
              {
                  name: 'UserInsert',
                  index: 'UserInsert',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100
              },
              {
                  name: 'InsertDate',
                  index: 'InsertDate',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100,
                  sorttype: 'date',
                  datefmt: 'Y-m-d'
              },
              {
                  name: 'UserUpdate',
                  index: 'UserUpdate',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100
              },
              {
                  name: 'UpdateDate',
                  index: 'UpdateDate',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100,
                  sorttype: 'date',
                  datefmt: 'yyyy-mm-dd'
              },
              {
                  name: 'Active',
                  index: 'Active',
                  width: 100,
                  align: "left",
                  edittype: "checkbox",
                  editable: true,
                  size: 100
              }
              ],
                          pager: jQuery('#pager'),
                          rowNum: 10,
                          rowList: [10, 20, 30],
                          sortname: 'GroupID',
                          sortorder: 'asc',
                          subGrid: true,
                          subGridRowExpanded: function (subgrid_id, row_id) {
                              var subgrid_table_id;
                              subgrid_table_id = subgrid_id + "_t";
                              jQuery("#" + subgrid_id).html("&lt;table id='" + subgrid_table_id + "' class='scroll'&gt;&lt;/table&gt;");
                              jQuery("#" + subgrid_table_id).jqGrid({
                                  url: 'JqGridTest1.aspx/GetDataTableSubGroup',
                                  data: "{'pPageSize':'" + $("#" + subgrid_table_id).getGridParam("rowNum") +
              "','pCurrentPage':'" + $("#" + subgrid_table_id).getGridParam("page") +
              "','pSortColumn':'" + $("#" + subgrid_table_id).getGridParam("sortname") +
              "','pSortOrder':'" + $("#" + subgrid_table_id).getGridParam("sortorder") + "'}", //PageMethod Parametros de entrada
                                  postData: {
                                      GroupID: row_id
                                  }
              ,
                                  datatype: 'json',
                                  mtype: 'POST',
                                  height: 150,
                                  colNames: ['Grupo', 'Sub Grupo', 'Nombre', 'Valor 1', 'Valor 2', 'Usuario Insercion', 'Fecha Insercion', 'Usuario Actualizacion', 'Fecha Actualizacion', 'Active'],
                                  colModel: [{
                                      name: 'GroupID',
                                      index: 'GroupID',
                                      width: 40,
                                      editable: true,
                                      editoptions: {
                                          readonly: true,
                                          size: 10
                                      },
                                      editrules: { edithidden: true }
                                  },
              {
                  name: 'SubGroup',
                  index: 'SubGroup',
                  width: 40,
                  editable: true,
                  editoptions: {
                      readonly: true,
                      size: 10
                  },
                  align: "left",
                  size: 100,
                  editrules: { edithidden: true }
              },
              {
                  name: 'ParameterName',
                  index: 'ParameterName',
                  width: 100,
                  align: "left",
                  editable: true,
                  size: 100
              },
              {
                  name: 'Value',
                  index: 'Value',
                  width: 100,
                  align: "left",
                  editable: true,
                  size: 100
              },
              {
                  name: 'Value2',
                  index: 'Value2',
                  width: 100,
                  align: "left",
                  editable: true,
                  size: 100
              },
              {
                  name: 'UserInsert',
                  index: 'UserInsert',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100
              },
              {
                  name: 'InsertDate',
                  index: 'InsertDate',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100,
                  sorttype: 'date',
                  datefmt: 'Y-m-d'
              },
              {
                  name: 'UserUpdate',
                  index: 'UserUpdate',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100
              },
              {
                  name: 'UpdateDate',
                  index: 'UpdateDate',
                  width: 100,
                  align: "left",
                  editable: false,
                  size: 100,
                  sorttype: 'date',
                  datefmt: 'yyyy-mm-dd'
              },
              {
                  name: 'Active',
                  index: 'Active',
                  width: 100,
                  align: "left",
                  edittype: "checkbox",
                  editable: true,
                  size: 100
              }
              ],
                                  pager: jQuery('#pager2'),
                                  sortname: 'GroupID',
                                  sortorder: 'asc',
                                  multiboxonly: false,
                                  viewrecords: true,
                                  imgpath: 'Themes/images',
                                  contentType: "application/json; charset=utf-8",
                                  serializeGridData: function (data) {
                                      return $.toJSON(data);
                                  }
                              })
                          },
                          multiboxonly: false,
                          viewrecords: true,
                          imgpath: 'Themes/images',
                          serializeGridData: function (data) {
                              return $.toJSON(data);
                          }
                      }).navGrid("#pager", { edit: true, add: true, search: true, del: true },
              { url: "JqGridTest1.aspx/EditData", closeAfterEdit: true },
              { url: "JqGridTest1.aspx/EditData", closeAfterAdd: true, beforeShowForm: function (formid) {
                  //jQuery("#ParameterName").focus();
                  //$("#ParameterName").focus();
                  jQuery("#GroupID").val("AUTOMATIC VALUE");
                  jQuery("#SubGroup").val("0");
              }, afterShowForm: function (formid) {
                  $("#ParameterName").focus();
              }
              },
              { url: "JqGridTest1.aspx/DeleteData" });
                  });
                  jQuery.extend(jQuery.jgrid.edit, {
                      ajaxEditOptions: { contentType: "application/json" },
                      recreateForm: true,
                      serializeEditData: function (postData) {
                          return JSON.stringify(postData);
                      }
                  });
  
              &lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
              &lt;form id="form1" runat="server"&gt;
              &lt;table id="grdParam" class="scroll" align="center" width="100%"&gt;
              &lt;/table&gt;
              &lt;div id="pager" class="scroll" style="text-align: center;"&gt;
              &lt;/div&gt;
              &lt;/form&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>