ParamQuery grid support forum
General Category => Bug Report => Topic started by: SureshB on September 28, 2016, 01:03:15 am
-
Hi,
I have an issue with scroll bar.
When I Expand multiple nested grids in different levels. I need a scroll bar for the master grid. Now scroll bar is coming only when I expand first level nested grids.
When I expand second or third level nested grids. Scroll bar is not showing for the main grid.
Screenshot attached.
Thank you.
-
Scrollbar works fine in the demo: http://paramquery.com/pro/demos/nesting
Which version of the grid is it and have you added scrollModel: { flexContent: true },
-
Hi,
We are using 2.x version.
and the scroll bar is working when we expand the multiple grids in 1st level. and if they go beyond the main grid, then the scroll bar is coming.
But,
When we expand the grids in 3rd level, Grid1-> Grid2 -> Grid3.
If data is go beyond the main grid. that time scroll bar is not coming to main grid.
I have added scrollModel: { flexContent: true } . but no Luck.
Let me know do you understand my explanation.
Thank you.
-
I tested this code
$(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": "Asia",
"data": [
{
"name": "Central Asia",
"data":[
{ "name": "Kazakhstan", "literacy": 98.4},
{ "name": "Kyrgyzstan", "literacy": 97 },
{"name": "Tajikistan", "literacy": 99.4},
{ "name": "Turkmenistan", "literacy": 98},
{ "name": "Uzbekistan", "literacy": 99.3}
]
},
{
"name": "Eastern Asia",
"data":[]
}
]
}
];
//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
};
};
});
in version 2.4 http://paramquery.com/pro/demos24/nesting
and expanding the 3rd level grids, scrollbar works fine.
-
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
};
};
});
-
Please find attached the patch for the fix to this issue for v2.4.1.
The patch file can be included after pqgrid js file.
-
Hi.. I am using Pro v3.3.0 and this still doesn't work. I have a nested grid. When the main grid has only one row and eventually when I expand the inner grids, I don't get a scroll bar for the main grid and the content is not fully visible. I tried the file attached but it didn't work.
-
Hi.. Please help!!! This is a blocking issue and has to be released to the customer soon..
-
Please upgrade it to v3.4.1
Also yours' is not a Pro account. Could you please share your Txn ID.
-
Hi, I purchased a Pro license back in late 2015, and am currently using version 3.3.1, which I think also has this issue (I'm just now for the first time using nested grids).
Am I eligible for the 3.4.1 update that you mention to fix this issue? If so, how do I go about downloading it?
Thanks.