Jqgrid subgrid json data not showing

Question

The main grid loads data fine, but the subgrid data is not displayed.

This is the json data returned by my java controller for the subgrid:

{"allTrackingNrs":null,"page":1, "records":[{"reference":"DGL1008","shipUnitType":"CARTON","totalOfCartons":1,"trackingNr":"SLC160759060"},{"reference":"DGL-1008","shipUnitType":"CARTON","totalOfCartons":1,"trackingNr":"SLC160759060"},{"reference":"DGL-1008","shipUnitType":"CARTON","totalOfCartons":1,"trackingNr":"SLC160759060"},{"reference":"DGL1008","shipUnitType":"CARTON","totalOfCartons":1,"trackingNr":"SLC160759060"}], "recordsTotal":4,"rows":4,"sidx":null,"sord":"asc","total":1,"trackingNr":"SLC160759060","truckId":null,"truckShipmentComponent":{}}

This is my javascript code

<script type="text/javascript">
    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',
            colNames: ['Lead Tracking #'],
            colModel: [
                {name: 'trackingNr', width: 100}
            ],
            rowNum: 10,
            height: "auto",
            width: 850,
            idPrefix: mainGridPrefix,
            autoheight: true,
            rowList: [10, 20, 30],
            pager: jQuery('#shipment_grid_pager'),
            sortname: 'trackingNr',
            emptyrecords: 'No shipments found with the selected filter(s)',
            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,
            loadComplete: function(data) {
                grid.jqGrid('setColProp', 'trackingNr',{
                    searchoptions: {
                        clearSearch: true,
                        attr: {style: "align:'left'; width:150px;margin-top:1px;"},
                        sopt:['cn'],
                        dataInit: function(elem) {
                            $(elem).autocomplete({
                                source:data.allTrackingNrs,
                                delay:0,
                                minLength:2
                            });
                        }
                    }
                });
                grid.jqGrid('filterToolbar', {autoSearch: true});

                // reduce font size of autocomplete input
                $(".ui-autocomplete.ui-widget").css({fontSize: "11px"});
            },
            subGridRowExpanded: function (subgridDivId, rowId) {
                var rowData = grid.getRowData(rowId);
                var selTrackingNr= rowData['trackingNr'];
                var $subgrid = $("<table id='" + subgridDivId + "_t'></table>");
                   //     pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                    //    subgrids = $(this).jqGrid("getGridParam", "userData");

                $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
                $subgrid.jqGrid({
                    data: "json",
                    mtype: 'GET',
                    url: '${pageContext.request.contextPath}/getTruckShipmentJSONAction?trackingNr=' + selTrackingNr,
                    colNames: ['Ship Type (Pallet / Carton)', 'Ship Unit (Pallet ID / Cone #)', 'Total Cartons'],
                    colModel: [
                        { name: "shipUnitType"},
                        { name: "reference", sorttype: "integer" },
                        { name: "totalOfCartons", sorttype: "integer" }
                    ],
                    cmTemplate: { align: "center" },
                    jsonReader: {
                        root: "records",
                        repeatitems: false
                    },
                    sortname: "reference",
                    sortorder: "desc",
                    height: "100%",
                    rowNum: 10,
                    autowidth: true,
                    autoencode: true,
                    gridview: true,
                    idPrefix: rowId + "_"
                });
            }
        }).navGrid('#shipment_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true})
                .jqGrid("setLabel", "trackingNr", "", {"text-align": "left"}); //align 'Lead Tracking #' column header  to the left;


    });

</script>

How can I get my subgrid data to be displayed?

Answer 1

I have fixed the problem, it was a typo error. I wrote data : "json", instead of datatype : "json" in the subGridRowExpanded: function (subgridDivId, rowId) {....} function