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?
