c# - JqGrid - SubGrid not display data -
after try every thing stackoverflow, run out of ideas. problem is: have jqgrid 1 subgrid. grid workly perfect, 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 popup on pressing escape key reloadaftersubmit: true, drag: true, aftersubmit: function (response, postdata) { if (response.responsetext == "") { $(this).jqgrid('setgridparam', { datatype: 'json' }).trigger('reloadgrid');//reloads grid after edit return [true, ''] } else { $(this).jqgrid('setgridparam', { datatype: 'json' }).trigger('reloadgrid'); //reloads grid after edit return [false, response.responsetext]//captures , displays 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 add window after add aftersubmit: function (response, postdata) { if (response.responsetext == "") { $(this).jqgrid('setgridparam', { datatype: 'json' }).trigger('reloadgrid')//reloads grid after add return [true, ''] } else { $(this).jqgrid('setgridparam', { datatype: 'json' }).trigger('reloadgrid')//reloads 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 json :
[{"id":0,"filename":"91606246.pdf","size":0.03}] but subgrid not show received data. snippet sc: grid subgrid empty
i have 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.
you use datatype: 'json' option in subgrid instead of datatype: 'json'. main problem.
i strictly recommend add idprefix option subgrid, unique value idprefix. fore example idprefix: "s_" + row_id + "_" or idprefix: subgrid_id or idprefix: $.jgrid.randid(). prevent later problems id duplicates. option autoencode: true helpful subgrid in many scenarios.
i recommend consider use free jqgrid (which develop) instead of commercial guriddo jqgrid js. if prefer use guriddo, should think required payments (see the prices) , holding of license agreement.
Comments
Post a Comment