ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: jplevene on November 29, 2023, 10:33:25 pm
-
Worked fine with 9.0.0, upgraded to 9.1.0 and got the following console error for each grid (see attached). I changed it to 9.0.2 and it worked fine, so only 9.1.0 has the issue:
Uncaught TypeError: Cannot read properties of undefined (reading '0')
at pq.cRenderBody.getTop (pqgrid.min.js:34:3135)
at pq.cRenderBody.getTopSafe (pqgrid.min.js:34:3308)
at pq.cRenderBody.setPanes (pqgrid.min.js:34:26214)
at e.<computed>.<computed>.<anonymous> (pqgrid.min.js:34:22372)
at p (pqgrid.min.js:9:10322)
at t._trigger (pqgrid.min.js:9:10797)
at pq.cRenderSum.setPanes (pqgrid.min.js:34:29047)
at pq.cRenderSum.init (pqgrid.min.js:34:28444)
at pq.cRenderBody.init (pqgrid.min.js:34:21325)
at b.paramquery.cRefresh.refresh (pqgrid.min.js:9:126087)
-
Please mention the browser name & version.
Do you get the same error on https://paramquery.com/pro/demos/group_summary
-
The demo worked fine and I tested on Chrome Version 119.0.6045.199 (Official Build) (64-bit) & Version 119.0.6045.200 (Official Build) (64-bit)
I use the render for columns so I think this where the issue is.
-
Please share a small test case on jsfiddle reproducing the error if you need help to resolve the issue.
-
I discovered that this is due to column render and when I have a hidden grid, lets say using jQuery UI tabs, and the grid is not inside the open tab.
PQ Grid is trying to draw the results of the render, when it should ignore applying to the DOM if the grid is hidden.
This is also a bug in 9.1.1
P.S. Love the new lines in tree view, but it would be nice to have an option for solid without having to change the CSS. However going from dotted to solid leaves a gap between vertical lines.
-
PQ Grid is trying to draw the results of the render, when it should ignore applying to the DOM if the grid is hidden.
pqgrid skips the DOM refresh when it's hidden.
Please share a small test case on jsfiddle reproducing the issue.
-
https://jsfiddle.net/hirakwebguru/ot57shnq/18/ (https://jsfiddle.net/hirakwebguru/ot57shnq/18/)
please check above jsfiddle
-
I can't reproduce it with https://jsfiddle.net/qtw0z1s5/4/, can I post a private link as I'm finding it hard to source the bug.
-
Troubleshooting / checking the scripts on private links is outside the scope of support.
Please take care not to share data, colModel or initialization objects (without making a deep copy) between the grids on same page because pqgrid adds metadata to these objects which can cause various issues.
-
I understand, but I posted the fix as well and just thought you wanted to see it.
To fix the bug, in pqgrid.dev.js change line 27640 to:
var top = this.topArr ? this.topArr[ri] : 0,
I think I found the issue, it wasn't my directly created grids, it is a filter grid, and sometimes the dropdown filter has no options, in which case my column was hidden. It is a combination of these with no headings in the filter grid that caused this.topArr to be undefined. The culprit column is below (global_data["dates"] can be empty or an array of ISO date strings).
The issue is that this.topArr is undefined when there are no options
{dataIndx:"dates", width:"7%", hidden:true, title:"Dates", sortable:"true", align:"right", halign:"center", editable:false,
format: function(c) { return empty(c) ? "∞" : moment(c).format("L");}, // This changes the selector
render: function(ui){ // This changes the cell
var dates = typeof(ui.rowData["dates"])==="string" ? JSON.parse(ui.rowData["dates"]) : false,
tot_qty = 0,
filter = ui.column.filter.crules[0].value;
if(dates)
$.each(dates, function(dt, qty){
if(empty(filter) || (Array.isArray(filter) && filter.includes(dt)))
tot_qty += floatval(qty);
});
return {
text: tot_qty+"" // Must be a string
};
},
filter: {
crules: [{condition: 'range'}],
gridOptions: {
stripeRows: false,
filterModel: {header: false}, //hide search box in the dropdown
refresh: function(event, ui){
// Make the grid width not as wide
this.element.parent().width(120);
}
},
//override range compare.
conditions: {
range: {
compare: function (cellData, val) {
var dates = typeof(cellData)==="string" ? JSON.parse(cellData) : false,
is_match = false;
$.each(val, function(i,v){
if(dates && typeof(dates[v])!=="undefined")
{
is_match = true;
return false;
}
});
return is_match;
}
}
}
},
filterFn: function(ui){
// Add all the date options
var options = [];
if(!empty(global_data["dates"]) && Array.isArray(global_data["dates"]))
{
global_data["dates"].map(function(val){
var opt = {};
opt[val] = empty(val) ? "∞" : moment(val).format("L");
options.push(opt);
});
}
return {
"options": options
};
}
},
-
Thank you, though I'm not sure what could cause call to getTop method before initialization of topArr.
-
Will the fix be in the next release?
-
yes
-
Mistake in my solution above, it should be:
var top = ri && this.topArr[ri] ? this.topArr[ri] : 0,
It is actually ri that is also undefined