I have report with hierarchical nested grids.
I have set the nested grid height to 'flex' and scrollModel to autofit. Sub grid is not expanding to its full length.
Same code was working in v3.3 but with new upgrade now it is not working. I am using pqgrid 5.6.1.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="pqgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="pqgrid.min.js"></script>
</head>
<script>
var platforms;
var $grid;
$(document)
.ready(function() {
$grid = $("#eventcodes_grid");
var nestedData = [{ "Code": "0x08", "Count": 7, "data": [{ "Mask": "0x01", "Count": 6, "data": [{ "Name": "ABC.XYZ", "Place": "XXX" }, { "Name": "ABC.XYZ", "Place": "YYY" }, { "Name": "ABC.XYZ", "Place": "ZZZ" }, { "Name": "ABC.XYZ", "Place": "MMM" }, { "Name": "ABC.XYZ", "Place": "NNN" }, { "Name": "ABC.XYZ", "Place": "DDD" }] }, { "Mask": "0x81", "Count": 1, "data": [{ "Name": "ABC.XYZ", "Place": "RRR" }] }] }];
var subContinentModel = function(data) {
return {
dataModel: { data: data },
colModel: [
{
title: "",
minWidth: 27,
maxWidth: 27,
type: "detail",
resizable: false,
editable: false,
sortable: false
},
{ title: 'Mask', dataIndx: 'Mask' },
{ title: 'Count', dataIndx: 'Count' }
],
height: 'flex',
numberCell: { show: true },
scrollModel: { autoFit: true },
showTop: false,
detailModel: {
init: function(ui) {
var rowData = ui.rowData,
rdata = rowData.data,
model = (rdata[0] && rdata[0].data) ? subContinentModel(rdata) : countryModel(rdata),
$grid = $("<div></div>").pqGrid(model);
return $grid;
}
}
};
};
var countryModel = function(data) {
return {
dataModel: { data: data },
colModel: [
{ title: 'Name', dataIndx: 'Name' },
{ dataIndx: 'Place', title: 'Place' }
],
height: 'flex',
maxHeight: 300,
numberCell: { show: true },
scrollModel: { autoFit: true },
showTop: false
};
};
$("#eventcodes_grid")
.pqGrid({
height: 'flex',
width: 600,
dataModel: { data: nestedData },
scrollModel: { autoFit: true, flexContent: true },
colModel: [
{
title: "",
minWidth: 27,
maxWidth: 27,
type: "detail",
resizable: false,
editable: false,
sortable: false
},
{ title: 'Code', dataIndx: 'Code' },
{ title: 'Count', dataIndx: 'Count' }
],
numberCell: { show: false },
title: "<b>Continent & Countries</b>",
resizable: true,
detailModel: {
init: function(ui) {
var rowData = ui.rowData,
model = subContinentModel(rowData.data),
$grid = $("<div></div>").pqGrid(model);
return $grid;
}
}
});
});
</script>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
</div>
</div>
<div class="panel-body" style="height: 100%">
<div id="eventcodes_grid" style="font-family: Intel Clear;"></div>
</div>
</div>
</body>
</html>
