title: How to show subgrid in jqgrid in ASP.NET MVC 5?
body: <p>My jqgrid is working perfectly but now i am implementing the subgrid. It shows the + sign and when i click on it the blank row displayed with loading.... this is the client side code</p>
  
  <pre><code>$(document).ready(function () {
      $("#Grid").jqGrid({
          url: '/Home/GetDetails',
          datatype: 'json',
          myType: 'GET',
          colNames: ['id','Name', 'Designation', 'Address', 'Salary'],
          colModel: [
  
              { key: false, name: 'Id', index: 'Id',  },
              { key: false, name: 'Name', index: 'Name', editable: true },
              { key: false, name: 'Designation', index: 'Designation', editable: true },
              { key: false, name: 'Address', index: 'Address', editable: true },
              { key: false, name: 'Salary', index: 'Salary', editable: true }
  
          ],
          jsonReader: {
              root: 'rows',
              page: 'page',
              total: 'total',
              records: 'records',
              id: '0',
              repeatitems: true
          },
          pager: $('#pager'),
          rowNum: 10,
          rowList: [10, 20, 30],
          width: 600,
          viewrecords: true,
          multiselect: true,
          sortname: 'Id',
          sortorder: "desc",
          caption: 'Employee Records',
          loadonce: true,
          gridview: true,
          autoencode: true,
          subGrid: true,
          subGridUrl: '/Home/Subgrid',
          subGridModel: [{
              name: ['No', 'Item','Quantity'],
              width: [55, 55,55]
          }
          ],
      }).navGrid('#pager', { edit: true, add: true, del: true },
      {
          zIndex: 100,
          url: '/Home/Edit',
          closeOnEscape: true,
          closeAfterEdit: true,
          recreateForm: true,
          afterComplete: function (response) {
              if (response.responseText)
              {
                  alert(response.responseText);
              }
          }
      },
      {
          zIndex: 10,
          url: '/Home/Add',
          closeOnEscape: true,
          closeAfterEdit: true,
          recreateForm: true,
          afterComplete: function (response) {
              if (response.responseText) {
                  alert(response.responseText);
              }
          }
      },
      {
          zIndex: 100,
          url: '/Home/Delete',
          closeOnEscape: true,
          closeAfterEdit: true,
          recreateForm: true,
          afterComplete: function (response) {
              if (response.responseText) {
                  alert(response.responseText);
              }
          }
      }
  
      );
  
  });
  </code></pre>
  
  <p>Subgrid url action method is as below:</p>
  
  <pre><code>  public JsonResult Subgrid(String id)
    {
      Database1Entities db = new Database1Entities();
  
      Product  p= new Product {No=1,Item="Juice",Quantity=23};
      var jsondata = new { rows=2,
                           cell = new string[] { p.No.ToString(),
                                              p.Item,p.Quantity.ToString()}.ToArray()
       };
  
      return Json(jsondata, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>I am doing this first time. What is the mistake?Thanks in advance</p>