Custom multiple filter listeners

[jplevene]

You need to call the filter method to trigger filtering when using custom event listener.

Alternatively you can use the inbuilt event listener: 'change' which triggers when either Enter key is pressed or filter cell focus is changed.

Code: [Select]

{ title: "Customer Name", width: 120, dataIndx: "ContactName",
    filter: {
        crules: [{condition: 'begin' }],
listener:'change'
    }
},


I don't think you have answered the question or understood what I have asked.

In the column filter I want to set the "timeout" to 2 seconds, however while typing in the column header filter, if the user presses the [Enter] key, the timeout is cancelled and the filter starts early.  What you state above does not do this at all.

If you read my code, the listener listens for the [Enter] key, all I need to do is when it does detect the [Enter] key press, the filter starts and the timeout is cancelled.  All I need is the code to start the filter in the "listner" and cancel the timeout.  See my code below

PLEASE NOTE: If I set listener just for "keydown", the default action for "timeout" doesn't happen, meaning no filtering is triggered.  I am using remote filtering.

Code: [Select]

filter:{
   crules:[{condition:"contain"}],
   listener: {
      "keydown": function(e, ui){
         if(e.key==="Enter")
         {
            NEED_TO_CANCEL_TIMEOUT_AND_TRIGGER_THE_FILTER_HERE();
            or
            CALL_FILTER_TIMEOUT_EARLY();
         }
      },
      "timeout": function(e, ui){
         TRIGGER_THE_FILTER_TO START_HERE();
      }
   }
}

[paramvir]

Thanks for clarifying your requirements.

Here is how to do it.

First define the variable and function.

Code: [Select]

var Tid;
function callFilter(ui){
var column = ui.column,
            rule = { condition: column.filter.crules[0].condition,  dataIndx: column.dataIndx, value: ui.value, value2: ui.value2 };
grid.filter({
oper: 'add',
rules: [
rule
]
});
}

Then inside the filter listener:

Code: [Select]

listener: {
keydown: function(evt, ui){
if( evt.key == 'Enter' ){
clearTimeout(Tid);
callFilter(ui);
}
},
input: function( evt, ui){
clearTimeout(Tid);
Tid = setTimeout(function(){
callFilter(ui);
}, 2000 );
}
}


[jplevene]

Is there a way to clear the standard pqGrid filter timeout instead of using and creating then clearing a new one like your example does?

EDIT: Forget it, when you call a filter the pqGrid timeout is automatically cancelled

MY CODE FOR OTHERS THAT NEED IT:

Code: [Select]

function callFilter(ui){
var column = ui.column,
            rule = { condition: column.filter.crules[0].condition,  dataIndx: column.dataIndx, value: ui.value, value2: ui.value2 };
grid.filter({
oper: 'add',
rules: [
rule
]
});
}
Then in the column model:

Code: [Select]

filter:{
crules:[{condition:"contain"}],
listener: {
"keydown": function(e, ui)
{
if(e.key==="Enter")
callFilter(ui);
},
"timeout": function(e, ui){
callFilter(ui);
}
}
}
FOR OTHERS: If you want to disable the timeout, just remove the "callFilter(ui);" in the "timeout" listener.

Having an option to enable an [Enter] key trigger and another option to disable the timeout would be nice and inline with what other grids do (I added it to the requests thread)

[paramvir]

timeout is automatically disabled when any filter listener (inbuilt or custom) is used.

Inbuilt listener: 'change' enables the 'Enter' key trigger and timeout is disabled.

[jplevene]

timeout is automatically disabled when any filter listener (inbuilt or custom) is used.

The timeout filter is disabled, however the timeout listner is still called, so by calling the "callFilter(ui);" inside the "timeout" listener, it still works as if it isn't disabled.

Thinking about it, "change" might be better than keydown, as clicking out of the input will trigger the "change" listener.

Thanks