{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 甜甜的少女心 的问题《jqGrid: Not able to get data in subgrid》','https://www.manongdao.com/q-702767.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am using jqGrid 4.4.1 with subGrid.
I am pulling different kind of data but for this sample data, I am not able to get subGrid when click on "Expand".
Here is the sample code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SubGrid Real Data</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
<style>
.ui-jqgrid .ui-subgrid td.subgrid-data {
border-top: 0 none !important;
border-right: 0 none !important;
border-bottom: 0 none !important;
}
.ui-jqgrid .ui-subgrid span.ui-icon ui-icon-carat-1-sw {
background-color: #FFFFFF !important;
background-image: none !important;
border: 0px 0px 1px 1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint browser: true, eqeq: true, plusplus: true */
$(function () {
"use strict";
var colModelData =[
{"width":"300","name":"itemName","editable":false}
],
colNamesArray = ["Name"],
subColModel = [
{"width":"300","name":"itemName","editable":false}
],
myData = [{"id":"metlab panel","itemName":"Metlab Panel",
"subGridData":[
{"itemName":"CMP BILIRUBIN,TOTAL"},
{"itemName":"CMP CALCIUM"},
{"itemName":"CMP CREATININE"},
{"itemName":"CMP POTASSIUM"},
{"itemName":"CMP PROTEIN,TOTAL"},
{"itemName":"CMP SODIUM"},
{"itemName":"CMP GLUCOSE"}]
}];
$("#list").jqGrid({
datatype: "local",
data: myData,
colNames: colNamesArray,
colModel: colModelData,
gridview: true,
height: "100%",
width: "100%",
caption: "Create subgrid from local data",
subGrid: true,
subGridOptions: {
reloadOnExpand: false,
selectOnExpand: false
},
subGridRowExpanded: function (subgridDivId, parentRowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
var data = $(this).jqGrid("getLocalRow", parentRowId);
console.log(data.subGridData); // I can see data
$subgrid.jqGrid({
datatype: "local",
data: data.subGridData,
colModel:subColModel,
height: "100%",
width: "100%",
autoencode: true,
gridview: true,
rowNum: 200
});
$subgrid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-hdiv").hide();
}
});
});
//]]>
</script>
Output:
Your problem is incorrect working with
id.The first error is the usage of
idhaving blanks. If you replace"id":"metlab panel"with for example"id":"metlabpanel"one will see the subgrid already.The next problem is that the data for subgrid has no
idas all. In the case jqGrid will use values 1, 2, 3, ... as the rowid. If one would expand at least two subgrids you will have id duplicates which will be a problem. To solve the problem can useidPrefixfor subgrid which is created based on the rowid of the parent. For exampleIn any way you should always think to provide unique rowid for every row of main grid or subgrid.
The modified demo display the subgrid correctly
The best will be to fill
idproperty for every row or grid or subgrid which you create. If you not sure which value you want to assign you can just call$.jgrid.randId()which will provide safe unique value which you can use asid.