tfake tfake - 5 months ago 196
jQuery Question

JqGrid - SubGrid not display data

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.

Answer

You use dataType: 'json' option in subgrid instead of datatype: 'json'. It could be your main problem.

I would strictly recommend you to add idPrefix option to subgrid, with some unique value like idPrefix. Fore example idPrefix: "s_" + row_id + "_" or idPrefix: subgrid_id or just idPrefix: $.jgrid.randId(). It will prevent you from later problems with id duplicates. The option autoencode: true is helpful too for the subgrid in many scenarios.

I recommend you to consider to use free jqGrid (which I develop) instead of commercial Guriddo jqGrid JS. If you do prefer to use Guriddo, then you should think about the required payments (see the prices) and about the holding of the license agreement.