How to show subgrid in jqgrid in ASP.NET MVC 5?

Question

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

$(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);
            }
        }
    }

    );

});

Subgrid url action method is as below:

  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);
    }

I am doing this first time. What is the mistake?Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 11:44

I don't recommend you to use subGridModel. Instead of that it's much more flexible to use Subgrid as Grid. If the user clicks "+" icon (expand subgrid) then jqGrid just inserts empty row under selected with simple structure described in the answer for example. The id of the <div> where some custom "subgrid" information need be displayed will be the first parameter of subGridRowExpanded callback which you need to implement. The second parameter is the rowid of the expending row. By implementing the corresponding callback you can create any custom "subgrid". See the old answer for very simple demo.

So what you need to do is just write the code which creates grid which will be placed in subgrid row. It's only strictly recommended to use idPrefix parameter which used any values which depends from subgriddivid or parent rowid. Additionally you can consider to use autowidth: true option for subgrid, which will make the width of subgrid be exact correspond to the width of the main grid. Of cause to have rowid of the parent row send as id parameter to '/Home/Subgrid' you need use postData: { id: rowid }. See the code from the answer for example which I referenced previously.

How to show subgrid in jqgrid in ASP.NET MVC 5?

1 Answers1