1
Help for ParamQuery Pro / Re: Inheritance for cVirtual
« Last post by jplevene on January 13, 2025, 11:33:29 pm »Please can you respond to this support request
ParamQuery Grid
Recent Posts
2
Help for ParamQuery Pro / Re: Formula Editing with Cell Selection in Edit Mode
« Last post by paramvir on January 13, 2025, 03:12:50 pm »Currently the cell or a range reference has to be entered in a formula manually.
Your suggestion to fetch the reference automatically upon click on a cell / range is great and would be considered for addition in upcoming versions.
Thanks
Your suggestion to fetch the reference automatically upon click on a cell / range is great and would be considered for addition in upcoming versions.
Thanks
3
Help for ParamQuery Pro / Formula Editing with Cell Selection in Edit Mode
« Last post by omerix on January 12, 2025, 02:00:58 am »Hello Paramvir Teams,
This formula functionality is extremely useful for data entry tasks as it saves time and avoids the need for external tools like calculators. It simplifies tasks directly within the grid by allowing quick computations.
I want to achieve Excel-like behavior in the ParamQuery grid during cell editing. Specifically:
I start formula input by typing = in a cell, which puts the cell in edit mode.
*) While still in edit mode, I want to click another cell in the grid and have its reference automatically added to the formula in the editing cell (e.g., =D4).
*) Currently, clicking another cell exits the edit mode. I would like to prevent this behavior so that the cell remains in edit mode, and the clicked cell's reference is inserted into the formula.
*) Is it possible to implement such behavior in ParamQuery? If yes, could you please share an example configuration or code to achieve this?
For example, I attempted to calculate the weight by typing = in the "Freight" column
https://paramquery.com/pro/demos/freeze_columns
Thanks
This formula functionality is extremely useful for data entry tasks as it saves time and avoids the need for external tools like calculators. It simplifies tasks directly within the grid by allowing quick computations.
I want to achieve Excel-like behavior in the ParamQuery grid during cell editing. Specifically:
I start formula input by typing = in a cell, which puts the cell in edit mode.
*) While still in edit mode, I want to click another cell in the grid and have its reference automatically added to the formula in the editing cell (e.g., =D4).
*) Currently, clicking another cell exits the edit mode. I would like to prevent this behavior so that the cell remains in edit mode, and the clicked cell's reference is inserted into the formula.
*) Is it possible to implement such behavior in ParamQuery? If yes, could you please share an example configuration or code to achieve this?
For example, I attempted to calculate the weight by typing = in the "Freight" column
https://paramquery.com/pro/demos/freeze_columns
Thanks
4
ParamQuery Pro Evaluation Support / Re: Failed to call the method when initializing the instance using pqgrid in Vue3
« Last post by paramvir on January 10, 2025, 05:40:32 pm »I'm not sure what you mean by cannot access the refresh method.
Could you share a stackblitz.
Could you share a stackblitz.
5
Bug Report / Re: Another bug for hidden grids (with fix)
« Last post by paramvir on January 06, 2025, 10:24:56 pm »Data can be loaded in a hidden pqgrid and refresh can be safely called on it.
It would be great if you can share a jsfiddle or test case.
It would be great if you can share a jsfiddle or test case.
6
Help for ParamQuery Pro / Re: About using saveState and loadState
« Last post by paramvir on January 06, 2025, 01:48:37 pm »This example shows how to save and load state ( pageModel, filterModel, sortModel, colModel, etc ) from localStorage
https://paramquery.com/pro/demos/grid_state
You can test it by making some changes and reloading the page.
https://paramquery.com/pro/demos/grid_state
You can test it by making some changes and reloading the page.
7
Help for ParamQuery Pro / Inheritance for cVirtual
« Last post by jplevene on January 03, 2025, 07:27:21 pm »I want to override functions calcTopBottom, getTop, getLeft, etc. which is in window.pq.cVirtual.
I am using the jQuery version of pqGid, so to overwrite some functions I use the following which works fine:
However when I want to override cVirtual functions, to test this I do the following:
However the above functions are never called. What am I doing wrong?
I am using the jQuery version of pqGid, so to overwrite some functions I use the following which works fine:
Code: [Select]
(function($) {
var fn = $.paramquery._pqGrid.prototype;
fn.showLoading = function() {
if(this.$grid_center.is(":visible"))
{
this.loading = true;
open_loading_overlay();
}
};
fn.hideLoading = function() {
this.loading = false;
close_loading_overlay();
};
})(jQuery);However when I want to override cVirtual functions, to test this I do the following:
Code: [Select]
var cVirtual = window.pq.cVirtual.prototype;
cVirtual.calcTopBottom = function(left) {
console.log("calcTopBottom");
// Call the old
return cVirtual.calcTopBottom(left);
};
cVirtual.getTop = function(ri, actual) {
console.log("getTop");
// Call the old
return cVirtual.getTop(ri, actual);
};
cVirtual.getLeft = function(ci, actual) {
console.log("getLeft");
// Call the old
return cVirtual.getLeft(ci, actual);
};
cVirtual.getHeightR = function(ri, rows) {
console.log("getHeightR");
// Call the old
return cVirtual.getHeightR(ri, rows);
};
cVirtual.calInitFinal = function(top, bottom, left) {
console.log("calInitFinal");
// Call the old
return cVirtual.calInitFinal(top, bottom, left);
};However the above functions are never called. What am I doing wrong?
8
Help for ParamQuery Pro / Re: About using saveState and loadState
« Last post by omerix on January 03, 2025, 06:35:52 pm »Hello Paramvir,
I updated the JSFiddle: https://jsfiddle.net/omerx/09qagv3z/ , but it doesn't work the same way as it does locally.
What I want to achieve: I would like to save all options (like those in the grid_parts demo) to localStorage using saveState and then reload them from there.
The idea is to create something like a merged version of the grid_parts demo and the grid_state demo.
grid_parts : https://paramquery.com/pro/demos/grid_parts
grid_state : https://paramquery.com/pro/demos/grid_state
In addition to saving column layouts, I want to save and load other settings from localStorage. I would also like to include options for pageModel, sortModel, and filterModel. These options should allow users to toggle between local and remote settings, and the grid should restore them from localStorage when revisiting.
I've tried some implementations in JSFiddle but couldn't make it work. Any guidance would be greatly appreciated!
I updated the JSFiddle: https://jsfiddle.net/omerx/09qagv3z/ , but it doesn't work the same way as it does locally.
What I want to achieve: I would like to save all options (like those in the grid_parts demo) to localStorage using saveState and then reload them from there.
The idea is to create something like a merged version of the grid_parts demo and the grid_state demo.
grid_parts : https://paramquery.com/pro/demos/grid_parts
grid_state : https://paramquery.com/pro/demos/grid_state
In addition to saving column layouts, I want to save and load other settings from localStorage. I would also like to include options for pageModel, sortModel, and filterModel. These options should allow users to toggle between local and remote settings, and the grid should restore them from localStorage when revisiting.
I've tried some implementations in JSFiddle but couldn't make it work. Any guidance would be greatly appreciated!
9
Bug Report / Another bug for hidden grids (with fix)
« Last post by jplevene on January 03, 2025, 06:05:19 pm »If the grid is hidden when data is loaded, to fix I added the following:
In the case above, I opened the grid, scrolled down a lot, closed the grid, new data was loaded and it went wrong trying to show it.
The pqGrid code has been written assuming that the grid is visible when data is loaded or a refresh is called. This is obviously not always the case as sometimes the grid is prepared in the background for a better user experience.
Code: [Select]
getHeightR: function(ri, rows) {
if(typeof(ri)==="undefined") return 0;
...
getHeightCell: function(ri, rows) {
if(typeof(ri)==="undefined" || ri<0) return 0;
In the case above, I opened the grid, scrolled down a lot, closed the grid, new data was loaded and it went wrong trying to show it.
The pqGrid code has been written assuming that the grid is visible when data is loaded or a refresh is called. This is obviously not always the case as sometimes the grid is prepared in the background for a better user experience.
10
ParamQuery Pro Evaluation Support / Re: Failed to call the method when initializing the instance using pqgrid in Vue3
« Last post by cui on January 03, 2025, 06:56:10 am »Yes, I am obtaining the grid instance after an asynchronous call. Even after following your suggestions, I still cannot access the refresh method. This is the result printed in my console.
Code: [Select]
let gridInstance = pq.grid($(gridContainer.value), options)
console.error(gridInstance, gridInstance.refreshCM(), 'gridInstance.refreshCM()getccccc')
gridInstance.refreshCM()
gridInstance.refreshView()Code: [Select]
$bottom: jQuery.fn.init {0: div.pq-grid-bottom, length: 1, prevObject: j?y.fn.init}
$cont: jQuery.fn.init {0: div.pq-body-outer, length: 1, prevObject: j?y.fn.init}
$focusMgr: jQuery.fn.init {0: div.pq-focus-mgr, 1: div.pq-focus-mgr, length: 2, prevObject: j?y.fn.init}
$focusMgrHead: jQuery.fn.init {0: div.pq-focus-mgr, 1: div.pq-focus-mgr, length: 2, prevObject: j?y.fn.init}
$footer: jQuery.fn.init {0: div.pq-grid-footer.pq-pager, length: 1, prevObject: j?y.fn.init}
$grid_center: jQuery.fn.init {0: div.pq-grid-center, length: 1, prevObject: j?y.fn.init}
$head_i: jQuery.fn.init {0: div.pq-grid-cont.ui-draggable.ui-draggable-handle, length: 1, prevObject: j?y.fn.init}
$header: jQuery.fn.init {0: div.pq-header-outer.ui-widget-header, length: 1, prevObject: j?y.fn.init}
$loading: jQuery.fn.init {0: div.pq-loading, length: 1, prevObject: j?y.fn.init}
$summary: jQuery.fn.init {0: div.pq-summary-outer, length: 1, prevObject: j?y.fn.init}
$tbl: null
$title: jQuery.fn.init {0: div.pq-grid-title, length: 1, prevObject: j?y.fn.init}
$toolPanel: jQuery.fn.init {0: div.pq-tool-panel, length: 1, prevObject: j?y.fn.init}
$top: jQuery.fn.init {0: div.pq-grid-top.ui-widget-header, length: 1, prevObject: j?y.fn.init}
BS_on: false
Context: ? ()
Formulas: ? ()
HeaderMenu: ? ()
Merge: ? ()
Pic: ? ()
RowResize: ? ()
Tab: ? ()
bindings: jQuery.fn.init {0: div#grid_json3.pq-grid.pq-theme.ui-widget.ui-widget-content.pq-disable-select, length: 1, prevObject: j?y.fn.init}
classesElementLookup: {}
colIndxs: {ColorCode: 0, ColorName: 1, ENGName: 2, RGB: 3, PantoneCode: 4, ?}
colModel: (14) [Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object)]
columns: {ColorCode: Proxy(Object), ColorName: Proxy(Object), ENGName: Proxy(Object), RGB: Proxy(Object), PantoneCode: Proxy(Object), ?}
depth: 1
dims: {htCenter: 739, htHead: 56, htSum: 0, htBody: 0, wdCenter: 871, ?}
document: jQuery.fn.init {0: document, length: 1}
element: jQuery.fn.init {0: div#grid_json3.pq-grid.pq-theme.ui-widget.ui-widget-content.pq-disable-select, length: 1}
eventNamespace: ".pqGrid0"
focusable: jQuery.fn.init {}
headerCells: [Array(14)]
hoverable: jQuery.fn.init {}
iAnim: t.cAnim {model: {?}, grid: $.<?>.<computed>, nodes: Array(0)}
iAnimH: t.cAnimH {model: {?}, grid: $.<?>.<computed>, rtl: 'left', nodes: Array(0)}
iCheckBox: {}
iCols: c.cColModel {that: $.<?>.<computed>, vciArr: Array(14), ciArr: Array(14)}
iContext: t.cContext {model: {?}, that: $.<?>.<computed>, ns: '.pq-cmenu', rtl: false}
iDrag: t.cDrag {rtl: false}
iDragColumns: t.<computed> {that: $.<?>.<computed>, rtl: false, status: 'stop', $arrowTop: j?y.fn.init, $arrowBottom: j?y.fn.init}
iDrop: t.cDrop {model: {?}}
iFillHandle: t.<computed> {that: $.<?>.<computed>, rtl: false}
iFilterData: v {that: $.<?>.<computed>}
iFormulas: e.cFormulas {that: $.<?>.<computed>, fn: {?}, tabNames: {?}, obj: {?}}
iGroup: t.cGroup {Model: {?}, cbId: 'pq_group_cb', childstr: 'children', id: 'pq_gid', parentId: 'parentId', ?}
iHeaderMenu: i {that: $.<?>.<computed>, rtl: false}
iHistory: t.cHistory {that: $.<?>.<computed>, options: {?}, records: Array(0), counter: 0, id: 0}
iImport: E.cImport {that: $.<?>.<computed>}
iKeyNav: N.paramquery.cKeyNav {that: $.<?>.<computed>}
iMerge: t {that: $.<?>.<computed>, mc: Array(0), mc2: Array(0)}
iMouseSelection: e {that: $.<?>.<computed>}
iPic: w.paramquery.cPic {rtl: false, id: 0, left: 'left', pics: Array(0), that: $.<?>.<computed>}
iProxy: e.cProxy {that: $.<?>.<computed>}
iRefresh: b.paramquery.cRefresh {vrows: Array(0), that: $.<?>.<computed>, _autoResizeTimeout: 64}
iRenderB: pq.<computed> {uuid: 0, $ele: j?y.fn.init, $sum: j?y.fn.init, $h: j?y.fn.init, that: $.<?>.<computed>, ?}
iRenderHead: pq.<computed> {uuid: 0, that: $.<?>.<computed>, iMerge: t, $ele: j?y.fn.init, height: 'flex', ?}
iRenderSum: pq.cRenderSum {uuid: 0, that: $.<?>.<computed>, rtl: 'left', rowStyle: Array(0), iMerge: {?}, ?}
iResizeColumns: t.<computed> {that: $.<?>.<computed>, rtl: 'left'}
iRowResize: h.paramquery.cRowResize {that: $.<?>.<computed>, ht: 8}
iRows: t {that: $.<?>.<computed>, options: {?}, selection: Array(0), hclass: ' pq-state-select ui-state-highlight'}
iSelection: pq.Selection {_areas: Array(0), that: $.<?>.<computed>, iCells: t, _type: 'range'}
iSort: t.cSort {that: $.<?>.<computed>, sorters: Array(0), tmpPrefix: 'pq_tmp_', cancel: false}
iTab: t.cTab {that: $.<?>.<computed>}
iToolPanel: n.cToolPanel {that: $.<?>.<computed>, panes: Array(0), clsSort: 'pq-sortable', $ele: j?y.fn.init}
iTree: t.cTree {Model: {?}, that: $.<?>.<computed>, fns: {?}, dataIndx: undefined, cbId: 'pq_tree_cb', ?}
iUCData: t.cUCData {that: $.<?>.<computed>, udata: Array(0), ddata: Array(0), adata: Array(0), options: {?}}
iValid: t.cValid {that: $.<?>.<computed>}
listeners: {keyDown: Array(2), dataAvailable: Array(5), CMInit: Array(3), dataReadyDone: Array(3), colMove: Array(2), ?}
options: {classes: {?}, disabled: false, create: null, cancel: 'input,textarea,button,select,option,.pq-no-capture,.ui-resizable-handle', distance: 1, ?}
origOptions: {colModel: Proxy(Array), locale: 'en', width: '100%', height: '100%', showTitle: false, ?}
pageI: $.<computed>.<computed> {element: j?y.fn.init, uuid: 7, eventNamespace: '.pqPager7', bindings: j?y.fn.init, hoverable: j?y.fn.init, ?}
pdata: (20) [{?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}]
riOffset: 0
started: false
tables: []
uuid: 0
validations: {}
window: jQuery.fn.init {0: Window, length: 1}
xhr: {readyState: 4, getResponseHeader: ?, getAllResponseHeaders: ?, setRequestHeader: ?, overrideMimeType: ?, ?}
_mergeCells: false
_parent2: section
_queueATriggers: {}
_super: undefined
_superApply: undefined
_toolbar: $.<computed>.<computed> {element: j?y.fn.init, uuid: 3, eventNamespace: '.pqToolbar3', bindings: j?y.fn.init, hoverable: j?y.fn.init, ?}
[[Prototype]]: $.<computed>.<computed>