'jqGrid. Get rows from subgrid
I have jqGrid with subgrids.
How to get rows from subGrid? What I'm doing wrong? Below function, where i'm trying get rows, but always have errors.
loadComplete: function() {
var rowIds = $("#list4").getDataIDs();
$.each(rowIds, function (index, rowId)
{
//var rows = jQuery("#list4_"+rowId+"_t").GetRowCount();
//var rows = jQuery("#list4_"+rowId+"_t").getRowData(rowId);
var sgtable = $("#list4_" + rowId + "_t");
$.each(sgtable.rows, function(i, rId) //rows is undefined
{
console.log("rId:" + rId);
var cdn = jQuery("#list4_"+rowId+"_t").jqGrid('getCell', rId, 'ItemTypeName');
var cdv = jQuery("#list4_"+rowId+"_t").jqGrid('getCell', rId, 'ItemValue');
console.log("cdn:" + cdn);
console.log("cdv:" + cdv);
});
});
}
var rows = $("#list4_" + rowId + "_t").getDataIDs();
rows always == 0.
UPDATED!
Grid:

Full code below.
jQuery("#list4").jqGrid({
url: getDataUrl,
datatype: "json",
autowidth: false,
shrinkToFit: true,
height: 'auto',
loadonce:true,
colNames: ['ContractNo', 'ParentName', 'ItemTypeName', 'ItemValue', 'ParentItemID', 'ItemID'],
colModel:
[
{ name: 'ContractNo', index: 'ContractNo', hidden: true },
{ name: 'ParentName', index: 'ParentName', hidden: true },
{ name: 'ItemTypeName', index: 'ItemTypeName'/*,width: gwdth/2 */},
{ name: 'ItemValue', index: 'ItemValue'/*,width:gwdth/2*/ },
{ name: 'ParentItemID', index: 'ParentItemID', hidden: true },
{ name: 'ItemID', index: 'ItemID', hidden: true }
],
subGrid: true,
caption: "Contract items",
subGridOptions:
{
"expandOnLoad":true
},
gridComplete: function () {
var rowIds = $("#list4").getDataIDs();
$.each(rowIds, function (index, rowId) {
$("#list4").expandSubGridRow(rowId);
var sdata = $("#list4_" + rowId + "_t").getDataIDs();
console.log("ri: "+rowId+". sdlEXP:" + sdata.length);
});
},
subGridRowExpanded: function (subgrid_id, row_id)
{
var subgrid_table_id, pager_id;
// gwdth = $('div').width();
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
console.log("sqt_id: "+subgrid_table_id);
$("#" + subgrid_id).html("<div style='margin-left:0px'><table id='" + subgrid_table_id + "' class='scroll'><tr><td>Testing</td></tr></table><div id='" + pager_id + "' class='scroll'></div></div>");
jQuery("#" + subgrid_table_id).jqGrid({
colNames: ['ContractNo', 'ParentName', 'ItemTypeName', 'ItemValue', 'ParentItemID', 'ItemID'],
colModel:
[
{ name: 'ContractNo', index: 'ContractNo', hidden: true },
{ name: 'ParentName', index: 'ParentName', hidden: true },
{ name: 'ItemTypeName', index: 'ItemTypeName'/*, width: gwdth/2 - 102*/},
{ name: 'ItemValue', index: 'ItemValue'/*, width: gwdth/2*/},
{ name: 'ParentItemID', index: 'ParentItemID', hidden: true },
{ name: 'ItemID', index: 'ItemID', hidden: true }
],
height: 'auto',
rowNum: 20,
// sortorder: "asc",
shrinkToFit: true,
url: getDataUrl + "?subgrid=" + getCell(row_id),
// datastr: topicjson,
// datatype: "jsonstring",
datatype: "json",
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "ItemTypeName",
// sortname: 'ParamNameEN',
//loadonce: true,
ExpandColClick: true,
// SortTree:-1,
// sortable: true,
viewrecords: true,
url: getDataUrl + "&subgrid=" + getCell(row_id),
});
},
loadComplete: function() {
var sn = 150;
var sv = 400;
var rowIds = $("#list4").getDataIDs();
console.log("rids:" + rowIds.length);
$.each(rowIds, function (index, rowId)
{
console.log("#list4_" + rowId + "_t");
var sdata = $("#list4_" + rowId + "_t").getDataIDs();
console.log("sdl:" + sdata.length);
});
}
});
there are outputs to console:
//loadcomplite
rids:2 - that means we have 2 rows in main grid. It's true.
But when i try to get subgrids rows, it returned 0
sdl:0 - WHY?
But all data is loaded!
If i can't get data from subgrid in loadComplete, how to get subgrids data after grid loading?
what event I have to use?
Solution 1:[1]
First of all there are many different ways to implement subgrid in jqGrid. You should post mode details about your implementation.
Typically during filling of the main grid it will be just included additional column with the name "subgrid" in the colModel and in the grid. The column contains only an icon ("+" with the class "ui-icon-plus" for example) which uses the user to open subgrid. Only if the user click on the "+" symbol new additional row with subgrid will be added and filled.
So You can't find any subgrid inside of loadComplete of the main grid because there are just no subgrids at the moment.
The answer shows how one could get currently opened subgrids. One can use this inside of your custom navigator button, inside of onSelectRow or inside of many other callbacks, but of cause not inside of loadComplete.
You should more detailed explain what you really need. Probably you implemented loading all data of the grid inclusive the data of all subgrids. See the answer for example. In the case you do can access all data from all subgrids.
UPDATED: I still don't understand what you want to do, but in any way the code which you posted have important problems. You forget that Ajax requests to the server will be processed asynchronously. So if you just start loading of subgrid from url: getDataUrl + "&subgrid=" + getCell(row_id) it doesn't mean that the subgrid will be already seen in the loadComplete of the main grid. Additionally you should understand that call of expandSubGridRow method will just simulate click event (see the source code) which processing could be also asynchronously.
I would forward you one more time to the answer which shows how to load all subgrid data at once. In the way you can solve many problems and reduce unneeded round trips to the server. Probably
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Community |
