jqgrid subgrid is not loading data (no Ajax call sent to the server) - jqgrid

Question

I have below setup jqgrid (v 4.6.0).
$(function () {
var JQGridDefaults = {
caption: '',
rowList: [10, 50, 100],
datatype: 'json',
height: '100%',
viewrecords: true,
mtype: 'GET',
colNames: ['Item Control No', 'Item Short Description', 'ID'],
colModel: [
{
name: 'ItemCode', index: 'ItemCode', search: true, width: 230, cellattr: makeCellContentWrap, searchoptions: {
sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc'],
},
searchrules: {required: true}
},
{
name: 'ItemShortDesc', index: 'ItemShortDesc', search: true, width: 300, cellattr: makeCellContentWrap, searchoptions: {
sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc'],
},
searchrules: {required: true }
}
//Hidden Fields - Start
{ name: 'ItemID', hidden: true, key: true }
//HiddenFields End
],
pager: '#GridPager',
rowNum: 10,
sortname: 'ItemCode',
sortorder: 'asc',
url: '/Items/List',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata",
subgrid: {
root: "rows",
repeatitems: false
}
},
//Sub Grid - Start
subGrid: true,
subGridBeforeExpand: function (pID, rowID) {
console.log("Before Expand");
var gridData = $(this).jqGrid('getRowData',rowID);
if (gridData.ItemCode == "") {
return false;
}
},
subGridUrl: '/Items/Details',
subGridModel: {
name: ['Revision', 'ItemCode'],
width: [50, 100],
align: ['center', 'center'],
mapping: ['Revision', 'ItemCode']
},
afterInsertRow: function (rowid, aData, rowelem) {
// Remove the subgrid plus button except for rows that have exceptions
if (aData.ItemCode == "") {
$('#' + rowid).children("td.sgcollapsed").unbind();
$('#' + rowid).children("td.sgcollapsed").html("");
}
}
//Sub Grid - END
};
var JQGridSearchDefaults = {
multipleSearch: true,
recreateFilter: true,
showQuery: true,
closeAfterSearch: true,
closeAfterReset: true,
searchOnEnter: true,
closeOnEscape:true,
width: 600
};
$('#Grid').jqGrid(JQGridDefaults).navGrid('#GridPager', { view: false, del: false, add: false, edit: false, refresh: true },
{},
{},
{},
JQGridSearchDefaults);
$('#Grid').jqGrid('setGridWidth', $('#Grid').parents('.main-content').width() - 2);
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(function () {
$('#Grid').jqGrid('setGridWidth', $('#Grid').parents('.main-content').width() - 2);
}, 300);
});
});
The sub grid icon appears correctly but when I click on the Expand icon an empty row appears (no headers and no ajax call is sent)
does anyone have an idea on why the ajax call is not happening?
Note: I also tried to use 'subgridtype' parameter and define to make the service call that too did not make the Ajax call.
subgridtype: function (rowidparam) {
$.ajax({
url: '/Items/Details',
cache: false,
type: 'Get',
dataType: "json",
data: { id: rowidparam.ItemID }
}).done(function (data) {
$('#Grid')[0].subGridJson(data, rowidparam.id);
});
},

Answer 1

subgridtype must be string, for you try json
subgridtype: 'json'