title: jqGrid Problem Binding Subgrid
body: <p>I have a jqGrid that is not correctly displaying the subgrid rows. When I load the page, the regular grid rows display fine as well as the plus sign next to each of them, but when I click the plus button to expand them, the "Loading..." message just remains and nothing happens. I don't know if it makes a difference, but I am trying to do it on client side (loadonce: true).</p>
  
  <p>Here is the code for creating the grid:</p>
  
  <pre><code>$("#Grid1").jqGrid({
  // setup custom parameter names to pass to server
  prmNames: {
      search: null,
      nd: null,
      rows: "numRows",
      page: "page",
      sort: "sortField",
      order: "sortOrder"
  },
  datatype: function(postdata) {
      $(".loading").show(); // make sure we can see loader text
      $.ajax({
          url: 'WebServices/GetJSONData.asmx/getGridData',
          type: "POST",
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify(postdata),
          dataType: "json",
          success: function(data, st) {
              if (st == "success") {
                  var grid = $("#Grid1")[0];
                  grid.addJSONData(JSON.parse(data.d));
                  //Loadonce doesn't work, have to do its dirty work
                  $('#Grid1').jqGrid('setGridParam', { datatype: 'local' });
                  //After rows are loaded, have to manually load subgrid rows
                  var subgridData = JSON.parse(data.d).subgrid;
                  var lista = jQuery("#Grid1").getDataIDs();
                  var rowData;
                  //Iterate over each row in grid
                  for (i = 0; i &lt; lista.length; i++) {
                      //Get current row data
                      rowData = jQuery("#Grid1").getRowData(lista[i]);
  
                  }
              }
          },
          error: function() {
              alert("Error with AJAX callback");
          }
      });
  },
  // this is what jqGrid is looking for in json callback
  jsonReader: {
      root: "rows",
      page: "page",
      total: "totalpages",
      records: "totalrecords",
      cell: "cell",
      id: "id", //index of the column with the PK in it 
      userdata: "userdata",
      repeatitems: true
  },
  coNames: ['Inv No', 'Amount', 'Store', 'Notes'],
  colModel: [
      { name: 'InvNum', index: 'InvNum', width: 200 },
      { name: 'Amount', index: 'Amount', width: 55 },
      { name: 'Store', index: 'Store', width: 50 },
      { name: 'Notes', index: 'Notes', width: 100 }
  ],
  subGrid: true,
  subGridModel: [{
      name: ['InvNum', 'Name', 'Qauntity'],
      width: [55, 200, 80],
      params: ['InvNum']
  }],
  rowNum: 10,
  rowList: [10, 20, 50],
  pager: '#Div1',
  viewrecords: true,
  width: 500,
  height: 230,
  scrollOffset: 0,
  loadonce: true,
  ignoreCase: true,
  gridComplete: function() {
      $(".loading").hide();
  }
  }).jqGrid('navGrid', '#Div1', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true });
  </code></pre>
  
  <p>Here the code that I am using in the webservice call to create the JSON data:</p>
  
  <pre><code>
  IEnumerable orders = getOrders();
  IEnumerable items = getItems();
  
  int k = 0;
  
  var jsonData = new
  {
      totalpages = totalPages, //--- number of pages
      page = pageIndex, //--- current page
      totalrecords = totalRecords, //--- total items
      rows = (
          from row in orders
          select new
          {
              id = k++,
              cell = new string[] {
                  row.InvNum.ToString(), row.Amount.ToString(), row.Store, row.Notes
              }
          }
      ).ToArray(),
      subgrid = (
          from row in items
          select new
          {
              cell = new string[] {
                  row.InvNum.ToString(), row.Name, row.Quantity.ToString()
              }
          }
      ).ToArray()
  };
  
  result = Newtonsoft.Json.JsonConvert.SerializeObject(jsonData);
  </code></pre>