Filtering issue

[gmswsd]

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
},

[paramvir]

Can you please define how do you mean by pre filtering and how is it affecting the user experience.

Please also share a jsfiddle.

[gmswsd]

We want the global filter to work with the local column filter but once the global filter uses "contains", the local filters no longer use "range" as we want. As well, if the user uses the "range" to see only certain data, the global filter will overwrite those conditions. We believe this cannot be achieved because of prefiltering, as the filterhandler function doesn't work as we intended.

Here is a jsfiddle: https://jsfiddle.net/WebSalesDesign/6oucdvz9/33/

[paramvir]

First things first, global filter and column filters use same API so it's but normal that any condition or value set by global filter replaces the column filter ones.

Unless any condition or column is excluded from the filterRules used by global filter call. In the below code snippet, any column which uses range filter is excluded from global filter.

Code: [Select]

          if (dataIndx == "") { //search through all fields when no field selected.
         
            filterRules = this.getColModel().map(function(column) {
         
            var crule = (column.filter || {}).crules[0] || {};
            if(crule && crule.condition == "range" && crule.value && crule.value.length){
              return {
                dataIndx: column.dataIndx,
                        crules: [$.extend(true, {}, crule)]
                }               
              }
              else
                return {
                  dataIndx: column.dataIndx,
                  condition: condition,
                  value: value
                };
            })
          } else { //search through selected field.
            filterRules = [{
              dataIndx: dataIndx,
              condition: condition,
              value: value
            }];
          }

https://jsfiddle.net/o39fd1sm/