Show Posts
1
Help for ParamQuery Pro / Filtering issue
« on: June 19, 2020, 07:41:00 pm »
Hi,
There is an issue with the pq plugin that it prefilter the data before triggering the filter handler function:
This screenshot contains the output of filterhandler with all lines commented except for the first console log, the function received the original filters:
(see attachment- output_filterhandler)
When we uncomment the other lines, the first console log function shows filters after applying the new one:
(see attachment- console_log)
Also, when we use timeout handler, it triggers the function on losing focus again:
{
type: 'textbox',
label: 'Filter: ',
attr: 'placeholder="Enter your keyword"',
cls: "filterValue",
listener: {timeout: filterhandler} --> Timeout calls the function twice after the input field loses focus
},
(see attachment- timeout)
Here's the function implementation:
function filterhandler(e, u) {
console.log(this.getColModel()); --> This is called after filtering
var $toolbar = this.toolbar(),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterRules;
if (e.currentTarget.className == "filterColumn" || e.currentTarget.className == "filterCondition" && value == '') return;
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}];
}
// reset to range if text is empty
if (value == '') {
if (Array.isArray(filterRules)) {
filterRules = filterRules.map((rule) => {
return { ...rule, condition: 'range'}
});
} else {
filterRules.condition = 'range';
}
}
//call to grid filter method.
this.filter({
oper: 'add',
mode: 'OR',
rules: filterRules
}); --> This is called first!
}
We tried as well implementing beforeFilter, it's still called after filtering:
beforeFilter: function (e, u) {
console.log(u); --> This is called after filtering
},
There is an issue with the pq plugin that it prefilter the data before triggering the filter handler function:
This screenshot contains the output of filterhandler with all lines commented except for the first console log, the function received the original filters:
(see attachment- output_filterhandler)
When we uncomment the other lines, the first console log function shows filters after applying the new one:
(see attachment- console_log)
Also, when we use timeout handler, it triggers the function on losing focus again:
{
type: 'textbox',
label: 'Filter: ',
attr: 'placeholder="Enter your keyword"',
cls: "filterValue",
listener: {timeout: filterhandler} --> Timeout calls the function twice after the input field loses focus
},
(see attachment- timeout)
Here's the function implementation:
function filterhandler(e, u) {
console.log(this.getColModel()); --> This is called after filtering
var $toolbar = this.toolbar(),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterRules;
if (e.currentTarget.className == "filterColumn" || e.currentTarget.className == "filterCondition" && value == '') return;
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}];
}
// reset to range if text is empty
if (value == '') {
if (Array.isArray(filterRules)) {
filterRules = filterRules.map((rule) => {
return { ...rule, condition: 'range'}
});
} else {
filterRules.condition = 'range';
}
}
//call to grid filter method.
this.filter({
oper: 'add',
mode: 'OR',
rules: filterRules
}); --> This is called first!
}
We tried as well implementing beforeFilter, it's still called after filtering:
beforeFilter: function (e, u) {
console.log(u); --> This is called after filtering
},