Hi,
Please test the below code &data. Scroll bar is not showing for outer grid. Please Expand the Grids as shown in the screen shot and check.
Thank you.
$(function () {
//nested data.
var data = [
{
"name": "Africa",
"data": [
{
"name": "Northern Africa",
"data":[
{ "name": "Algeria", "literacy": 70},
{ "name": "Egypt", "literacy": 57.7 },
{ "name": "Libya", "literacy": 82.6},
{ "name": "Morocco", "literacy": 51.7},
{ "name": "Tunisia", "literacy": 74.2},
{ "name": "Western Sahara"}
]
},
{
"name": "Sub-Saharan Africa",
"data":[
{
"name": "Eastern Africa",
"data":[
{ "name": "Burundi", "literacy": 51.6},
{ "name": "Comoros", "literacy": 56.5 },
{"name": "Djibouti", "literacy": 67.9},
{ "name": "Eritrea", "literacy": 58.6},
{ "name": "Ethiopia", "literacy": 42.7}
]
},
{
"name": "Middle Africa",
"data":[
{ "name": "Angola", "literacy": 72.3},
{ "name": "Cameroon", "literacy": 56.9 },
{"name": "Central African Republic", "literacy": 64},
{ "name": "Chad", "literacy": 76},
{ "name": "Congo", "literacy": 56}
]
},
{
"name": "Southern Africa",
"data":[
{ "name": "Botswana", "literacy": 77},
{ "name": "Lesotho", "literacy": 65 },
{"name": "Namibia", "literacy": 84},
{ "name": "South Africa", "literacy": 86.4},
{ "name": "Swaziland", "literacy": 81.6}
]
}
]
},
{
"name": "Northern Africa",
"data":[
{ "name": "Algeria", "literacy": 70},
{ "name": "Egypt", "literacy": 57.7 },
{ "name": "Libya", "literacy": 82.6},
{ "name": "Morocco", "literacy": 51.7},
{ "name": "Tunisia", "literacy": 74.2},
{ "name": "Western Sahara"}
]
},
]
},
];
//initialize main grid
$("#grid_md").pqGrid({
height: 'flex',
width: 600,
height: 500,
dataModel: { data: data },
scrollModel: {autoFit: true, flexContent: true},
colModel: [
{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
{ title: 'Continent', dataIndx: 'name'}
],
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;
}
}
});
var subContinentModel = function( data ){
return {
dataModel: { data: data },
colModel: [
{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
{ title: 'Sub Continent', dataIndx: 'name'}
],
height: 'flex',
numberCell: { show: false },
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: 'Country', dataIndx: 'name'},
{ dataIndx: 'literacy', dataType: 'float', title: 'Literacy' },
],
height: 'flex',
maxHeight:300,
numberCell: { show: false },
scrollModel: {autoFit: true},
showTop: false
};
};
});
