Subgrid not getting populated in free jqGrid

Question

I am trying to add subgrid to every row of main grid. The main grid populates fine but when i click on the expand icon of a row subgrid is not populated. Only subgrid column headers appear.
The json data is a single nested data structure which is fetched only once when grid loads first time. So when i click on the grid expand icon i expect subgrid to be populated from the data that was fetched while displaying the parent grid.
The empty subgrid is displayed when i use - datatype: "local".
If i set datatype: "json" then a server side call is made to fetch data if i click on expand icon.
So how can i display subgrid using the single json data that was already fetched. Thanks
Please find sample code below,

$(document).ready(function () {
    "use strict";
    var dataGrid = $('#itemList');
    var firstClick = true;
    $('#action').click(function () {
        if (!firstClick) {
            $("#itemList").setGridParam({datatype:'json'}).trigger("reloadGrid");
        }   
        firstClick = false;
    $("#itemList").jqGrid({
        url: "${pageContext.request.contextPath}/billing/items",
        datatype: "json",
        mtype: "POST",
        autowidth: true,
        loadBeforeSend: function(jqXHR) {
             jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
        },
        colNames: ["Id", "Item Type", "Item Code"],
        colModel: [
            { name: "id", width: 35, sorttype:"int", search: false, editable: false, key: true, hidden: true},
            { name: "itemType", width: 100},
            { name: "itemCode", width: 120}

        ],
        maxHeight: 400,
        cmTemplate: {editable: true},
        pager: true,
        rowNum: 50,
        rowList: [50, 100, 150, 200],
        rownumbers: true,
        rownumWidth: 25,
        sortname: "itemType",
        sortorder: "asc",
        forceClientSorting: true,
        viewrecords: true,
        height: '100%',
        loadonce: true,
        //gridview: true,
        autoencode: true,
        editurl: "${pageContext.request.contextPath}/billing/saveItem",
        caption: "Item List",
        subGrid: true,
        subGridRowExpanded: function (subgridId, rowid) {
            var subgridTableId = subgridId + "_t";
            $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
            $("#" + subgridTableId).jqGrid({
                datatype: "local",
                data: $(this).jqGrid("getLocalRow", rowid).itemDetails,
                colNames: ["Id", "Unit", "Stock", "Batch No.", "Expiry Date", "Quantity Per Unit", "Price"],
                colModel: [
                    { name: "id", width: 35, sorttype:"int", search: false, editable: false, key: true, hidden: true},       
                    { name: "unit", width: 70, search: false},
                    { name: "availableQuantity", width: 55, search: false, formatter: "number",},
                    { name: "batchNumber", width: 80, search: false},
                    { name: "expiryDate", width: 80, search: false, sorttype: "date", formatoptions: {srcformat:'d/m/Y', newformat:'d/m/Y'}},
                    { name: "quantityPerUnit", width: 80, search: false, formatter: "number"},
                    { name: "price", width: 55, search: false, formatter: "number"}
                ],
                height: "100%",
                rowNum: 10,                    
                idPrefix: "s_" + rowid + "_",
                cmTemplate: {editable: true},
                editurl: "${pageContext.request.contextPath}/billing/saveItem"
            });
        }            
    }).navGrid({add:false,edit:false,del:true});
    $("#itemList").jqGrid('filterToolbar', {autoSearch: true, stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
    $("#itemList").jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
});

The sample json data:-

[{"id":1,"itemCode":"Omez","itemType":"Medicine","itemDesc":"Omez for acidity","itemDetails":[{"id":1,"batchNumber":"batch1","expiryDate":"01/06/2018","unit":"bottle","subUnit":"tablet","availableQuantity":120.0,"quantityPerUnit":60.0,"price":122.0}]}]

Answer 1

First of all it's important to understand that the data, returned from url will be read and saved locally in case of usage loadonce: true option of jqGrid. By default it read only the data for the columns of the grid and the property id (can be configured by id property of prmNames parameter). Free jqGrid allows to read and save any other additional properties. To specify the properties one can use additionalProperties. The simplest for of the usage would be

additionalProperties: ["itemDetails"]

It informs jqGrid to read and save locally itemDetails property of every item. After that $(this).jqGrid("getLocalRow", rowid).itemDetails will work.

Additionally you can remove the column id from colModel. jqGrid set id attribute of the rows based on the value of id property of input data (returned from the server). Thus you don't need to hold the duplicate information in hidden <td> cell of every row. You can remove the id column from both main grid and the subgrid.

If you want to set search: false for all columns of subgrid then you can use cmTemplate: {search: false} option of subgrid and remove search: false from all columns. In the same way you can include in cmTemplate the property width: 80 (cmTemplate: {search: false, width: 80}) to change the default value 150 for the width property to 80. After that you can remove width: 80 from tree columns of subdrid too.

You can remove sortorder: "asc" and height: '100%' properties, because there are default for free jqGrid. You can use

searching: {
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: 'cn'
}

The property autosearch: true (not autoSearch: true) are default. After that you can use filterToolbar without additional parameters.

I would recommend you to use additional option of navGrid: reloadGridOptions: { fromServer: true } which informs to reload the data from the server (by restoring original value of datatype) if the user clicks on Refresh button of navigator bar.