Jqgrid is empty, does not load json data from main

Question

My subgrid only shows the column headers but not not load the json data from the main grid. The columns are empty. I followed the tutorial on JQuery Grid-SubGrid for Parent-Child relation

but it does not work.

This is my javascript code:

      jQuery().ready(function () {
                var grid = jQuery("#shipment_grid");
                var mainGridPrefix = "s_";
                grid.jqGrid({
                    url: '${pageContext.request.contextPath}/getTruckShipmentJSONAction?truckId=' + <c:out value="${truckId}" />,
                    datatype: "json",
                    mtype: 'GET',
                    loadonce: true,
                    colNames: ['Lead Tracking #'],
                    colModel: [
                        {name: 'trackingNr', index: 'trackingNr', width: 100, align: 'left'}
                    ],
                    rowNum: 10,
                    height: 230,
                    width: 700,
                    idPrefix: mainGridPrefix,
                    autoheight: true,
                    rowList: [10, 20, 30],
                    pager: jQuery('#shipment_grid_pager'),
                    sortname: 'trackingNr',
                    sortorder: "desc",
                    jsonReader: {
                        root: "records",
                        page: "page",
                        total: "total",
                        records: "rows",
                        repeatitems: false
                    },
                    viewrecords: true,
                    altRows: false,
                    gridview: true,
                    multiselect:true,
                    hidegrid: false,
                    shrinkToFit: true,
                    forceFit: true,
                    idPrefix: mainGridPrefix,
                    caption: "Shipments Overview",
                    subGrid: true,
                    beforeProcessing: function(data) { 
                        //align 'Lead Tracking #' column header  to the left
                        grid.jqGrid ('setLabel', 'trackingNr', '', {'text-align':'left'});

                        var rows = data.rows, l = rows.length, i, item, subgrids = {};
                        for (i = 0; i < l; i++) {
                            item = rows[i];
                            if (item.shipUnitView) {
                                subgrids[item.id] = item.shipUnitView;
                            }
                        }
                        data.userdata = subgrids;

                    },              
                    subGridRowExpanded: function (subgridDivId, rowId) {
                        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                            pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                            subgrids = $(this).jqGrid("getGridParam", "userData");

                        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
                        $subgrid.jqGrid({
                            datatype: "local",
                            data: subgrids[pureRowId],
                            colNames: ['Ship Type (Pallet / Carton)', 'Ship Unit (Pallet ID / Cone #)', 'Total Cartons'],
                            colModel: [
                                { name: "shipUnitType", index: 'shipUnitType', width: 100, align: 'center'},
                                { name: "reference", index: 'reference', width: 100, align: 'center'},
                             { name: "totalOfCartons", index: 'totalOfCartons', width: 100, align: 'center'}
                            ],
                            sortname: "shipUnitType",
                            sortorder: "desc",
                            height: "100%",
                            rowNum: 10,
                            autowidth: true,
                            autoencode: true,
                            jsonReader: { 
                                root: "records",
                                records: "rows",
                                repeatitems: false,     
                                id: "reference" },
                            gridview: true,
                            idPrefix: rowId + "_"
                        });
                    }
                }).navGrid('#shipment_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true});


            });


This is my json data from the server:

 {"page":1,
    "records":[
        {"id":2,"trackingNr":"1Z1484366620874728", 
         "shipUnitView":[{"reference":"65000943","shipUnitType":"CARTON","totalOfCartons":1},
                        {"reference":"65000942","shipUnitType":"CARTON","totalOfCartons":1}]},

        {"id":4, "trackingNr":"1Z1484366620874746"
         "shipUnitView":[{"reference":"65000940","shipUnitType":"CARTON","totalOfCartons":1},
                        {"reference":"65000939","shipUnitType":"CARTON","totalOfCartons":1}]},

       {"id":3, "trackingNr":"1Z1484366620874764"
        "shipUnitView":[{"reference":"65000938","shipUnitType":"CARTON","totalOfCartons":1},
                        {"reference":"65000937","shipUnitType":"CARTON","totalOfCartons":1}]}  
    ],
  "recordsTotal":3,"rows":10,"sidx":null,"sord":"asc","total":1,"trackingNr":null,"truckId":"174225","truckShipmentComponent":{}}

Answer 1

First of all there are small errors in the JSON data which you posted. It contains no commas after "trackingNr":"1Z1484366620874746" and "trackingNr":"1Z1484366620874764". I hope that it's only cut&paste error during preparing the data for the question. In any way it would be more safe to include loadError callback (see the answer) in case of loading errors.

Your main error seems to me are inside of beforeProcessing callback. The data parameter of the callback contains the server response. The array of items you have inside of data.records, but you use var rows = data.rows, ... instead. The line should be fixed to var rows = data.records, ....

One asked you in the comment to prepare JSFiddle demo which demonstrates the problem and you had problems to prepare it because of usage datatype: "json". On the other side JSFiddle do provides you possibility to implement demos in the case. One can use Echo service. In case of jqGrid one needs just use mtype: "POST" and url: "/echo/json/". To inform echo service which data you want to have one need just send JSON encoded data in json parameter. So the fill looks like

// the data which we want to receive back
var serverResponse = {
        "page":1,
        ...
    };

$("#gridId").jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    datatype: "json",
    mtype: "POST",  // needed for JSFiddle echo service
    ...
});

The working JSFiddle demo you can find here: http://jsfiddle.net/OlegKi/ntfw57zm/. I makes some small additional optimization of your code.

I hope the example could help other people to post his questions with JSFiddle demos.