After i try every thing from stackoverflow, i run out of ideas. The problem is: i have jqGrid with one subgrid. The grid workly perfect, but subgrid not display data.
JS code:
$(document).ready(function () {
$("#tblJQGrid").jqGrid(
{
url: '@Url.Action("GetDataForGrid", "Validator")',
datatype: "json",
mtype: 'GET',
colNames: ['Archive Name', 'Upload By', 'Upload Date', 'Size in Mb'],
colModel: [
{ name: 'ArchiveName', index: 'ArchiveName', width: 150, stype: 'text' },
{ name: 'UploadUser', index: 'UploadUser', width: 150 },
{ name: 'UploadDate', index: 'UploadDate', width: 150 },
{ name: 'Size', index: 'Size', width: 150 }
],
sortname: 'ArchiveName',
rowNum: 10,
autowidth: true,
height: "auto",
gridview: true,
emptyrecords:"No records...",
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
viewrecords: true,
sortorder: 'desc',
caption: "List Pending Archive",
scrollOffset: 0,
subGrid: true,
subGridOptions:{
plusicon : "ui-icon-plus",
minusicon : "ui-icon-minus",
openicon: "ui-icon-carat-1-sw",
expandOnLoad: false,
selectOnExpand : false,
reloadOnExpand : true
},
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
var pager_id;
var d = [{ "Id": 0, "FileName": "91606246.pdf", "Size": 0.03 }];
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
var cellValue = $("#tblJQGrid").jqGrid('getCell', row_id, 'ArchiveName');
//jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
jsonReader: {
repeatitems: false,
cell: "",
id: "0"
},
url: '@Url.Action("GetDataSubGrid", "Validator")?FileName=' + cellValue,
//mtype: 'GET',
dataType: 'json',
colNames: ['Id', 'Archive Name', 'Size in Mb'],
colModel: [
{ name: "Id", index: "Id", width: 20, sortable: true },
{ name: "FileName", index: "FileName", width: 130,sortable:true },
{ name: "Size", index: "Size", width: 80, align: "right" },
],
height: 'auto',
//loadonce: true,
//gridview: true,
//autoencode: true,
rowNum: 20,
viewrecords: true,
sortname: 'FileName',
sortorder: "desc"
});
//jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
}
});
$('#tblJQGrid').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true,//Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true,//Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true }]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
});SubGrid url return this json :
[{"Id":0,"FileName":"91606246.pdf","Size":0.03}]
But the subgrid does not show received data. This is the snippet sc: Grid with subgrid empty
I have the following configuration:
- MVC 4,
- net framework 4.5
- jquery-2.2.3.js
- jquery.jqGrid.min.js (@license Guriddo jqGrid JS - v5.1.1 ...)
Please help.
