ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: vijay on November 21, 2025, 12:25:06 pm
-
Hello Paramveer,
I am using PQGrid with the latest version (V11).
As observed, when a filter is applied and I attempt to edit a cell, PQGrid throws a console error, and the cell cannot be edited.
Kindly review the code below and the attached file for your reference.
function filterhandler() {
var $toolbar = this.toolbar(),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterRules;
if (dataIndx == "") { //search through all fields when no field selected.
filterRules = this.getColModel().map(function(column) {
return {
dataIndx: column.dataIndx,
condition: condition,
value: value
};
})
} else { //search through selected field.
filterRules = [{
dataIndx: dataIndx,
condition: condition,
value: value
}];
}
//call to grid filter method.
this.filter({
oper: 'replace',
rules: filterRules
});
}
//filterRender to highlight matching cell text.(optional)
function filterRender(ui) {
var val = ui.cellData,
filter = ui.column.filter,
crules = (filter || {}).crules;
if (filter && filter.on && crules && crules[0].value) {
var condition = crules[0].condition,
valUpper = val.toUpperCase(),
txt = crules[0].value,
txt = (txt == null) ? "" : txt.toString(),
txtUpper = txt.toUpperCase(),
indx = -1;
if (condition == "end") {
indx = valUpper.lastIndexOf(txtUpper);
//if not at the end
if (indx + txtUpper.length != valUpper.length) {
indx = -1;
}
} else if (condition == "contain") {
indx = valUpper.indexOf(txtUpper);
} else if (condition == "begin") {
indx = valUpper.indexOf(txtUpper);
//if not at the beginning.
if (indx > 0) {
indx = -1;
}
}
if (indx >= 0) {
var txt1 = val.substring(0, indx);
var txt2 = val.substring(indx, indx + txt.length);
var txt3 = val.substring(indx + txt.length);
return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
} else {
return val;
}
} else {
return val;
}
}
var colModel = [{
title: "Customer ID",
dataIndx: "customerid",
width: 100
},
{
title: "Company Name",
width: 180,
dataIndx: "companyname",
editable:true
},
{
title: "Contact Name",
width: 140,
dataIndx: "contactname"
},
{
title: "Contact Title",
width: 140,
dataIndx: "contacttitle"
},
{
title: "Address",
width: "170",
dataIndx: "address"
}
];
var dataModel = {
location: 'remote',
url: "/pro/customers/get"
}
var newObj = {
scrollModel: {
autoFit: true
},
height: 'flex',
maxHeight: 400,
//pageModel: { type: 'local' },
dataModel: dataModel,
columnTemplate: {
render: filterRender
},
colModel: colModel,
filterModel: {
mode: 'OR'
},
editable: false,
showTitle: false,
toolbar: {
cls: "pq-toolbar-search",
items: [{
type: 'textbox',
label: 'Filter: ',
attr: 'placeholder="Enter your keyword" is="clear-text"',
styleCtrl: "width:150px;",
cls: "filterValue",
listener: {
timeout: filterhandler
}
},
{
type: 'select',
cls: "filterColumn",
listener: filterhandler,
options: function(ui) {
var opts = [{
'': '[ All Fields ]'
}];
this.getColModel().forEach(function(column) {
var obj = {};
obj[column.dataIndx] = column.title;
opts.push(obj);
})
return opts;
}
},
{
type: 'select',
cls: "filterCondition",
listener: filterhandler,
options: [{
"begin": "Begins With"
},
{
"contain": "Contains"
},
{
"end": "Ends With"
},
{
"notcontain": "Does not contain"
},
{
"equal": "Equal To"
},
{
"notequal": "Not Equal To"
},
{
"empty": "Empty"
},
{
"notempty": "Not Empty"
},
{
"less": "Less Than"
},
{
"great": "Great Than"
},
{
"regexp": "Regex"
}
]
}
]
}
};
pq.grid("#grid_search", newObj);
-
I've checked your code and steps in Chrome, Edge and Firefox. it works without any error.
Please confirm your OS and browser version.
-
Hello,
System Details are as follows:
OS: Windows 10 Pro
Chrome Version: Version 142.0.7444.176 (Official Build) (64-bit)
Microsoft Edge: Version 142.0.3595.94 (Official build) (64-bit)
We have checked, but it is still not working.
Kindly check the JS Fiddle for your reference.
https://jsfiddle.net/589jch3x/1/
In the given example, choose "Rank" and "Begins With" filter Option and filter with 1 value.
After the filter, try to update the first company name.
After the value change, click outside of the textbox. You will face the same issues.
-
Thanks for sharing the jsFiddle. Since the same code works on my side and we’ve already confirmed that we’re using the same PQGrid version, same dependencies, and even the same browser version, it’s likely that something specific to your environment is triggering the issue.
Even when everything else matches, PQGrid can behave differently because of:
- Browser extensions injecting extra scripts/CSS
- Browser zoom not set to 100%
- System DPI / display scaling differences
- Corrupted cached files
- Network blocking a CDN resource
- OS-level font or accessibility settings
- Chrome/Edge flags enabled
- Locale or number-format differences
To narrow it down, could you please try the following?
1. Open the jsFiddle in Incognito mode
2. Make sure your browser zoom is 100%
3. Disable all extensions temporarily
4. Hard refresh (Ctrl+Shift+R)
5. Check DevTools → Network tab for failed requests
6. Please check on another machine.
Let me know what you find — once we identify which environment difference is causing it, we can fix or work around.
-
Hi Paramvir,
We tried the steps you provided. Still, we are facing the issues.
For more reference, we are sharing a video with you. In which you can clearly see the errors that occurred in the pqgrid.js files.
We also have a project with an older PQ grid version, V9. The same functionality is working properly on the older version.
Kindly check the URL below.
https://drive.google.com/file/d/1t-VRz_GN7PiJIYs0RL88v5e27BFT37lc/view?usp=drive_link
-
Thank you for the details, I can see the error now, looking into it.
-
Please use this fix to get rid of the error
pq.fakeEvent=function(e,n,t){if("timeout"==n){let n,i,o=n=>e.val()!=i,u=n=>{i=e.val(),e.triggerHandler("timeout")};e.off("input change beforeinput").on("beforeinput",(n=>{null==i&&(i=e.val())})).on("input",(e=>{clearTimeout(n),n=setTimeout((function(){o()&&u()}),t)})).on("change",(e=>{o()&&u()}))}};
-
Hello Paramvir
Thanks for your reply.
I have found the 2 references of pq.fakeEvent in the pqgrid file. So, we need to replace the provided code in both locations or in any specific location?
Also, we are using the minified JS file for production mode, so it isn't easy to replace the provided content in the min.js file.
Please help us to do the same.
-
There is no need to change the existing files.
Please include this code either inline in <script> tags or a js file after the pqgrid js file
-
Hello Paramvir
The provided solution worked for me.
Thank You :D