Filter in header to stay focused after filter

[jplevene]

I'm getting an issue with slow typers, as the filter starts as they are typing because they type really slow (I know I can change the timeout, but I don't want to set it to 5 seconds).  The filter starts but the next character they type isn't appended to the filter in the header.

The reason is that the header is refreshed after the data is loaded.

How can I set the focus to the "same" filter in the header after the load?  If this is not possible, please can this be a feature request.

[paramvir]

Header is not refreshed in case of remote filtering to maintain the cursor position. https://paramquery.com/pro/demos/filter_header

If you are custom refreshing the grid, then pass header: false to the refresh* method to avoid header refresh.

[jplevene]

I have looked and haven't traced a single refresh after a filter, but I think it is somewhere else due to virtual page scrolling.

I am using virtual scroll paging using a method I discussed before, where the grid is filled with the first page of data then blank rows for the data that hasn't yet loaded.  The "getData" method seems to be triggering the refresh, thus the change of focus when I return the data in "getData".

How can I re-focus the last selected filter when using "getData".

Also is it possible to trigger the filter when "ENTER" is pressed while typing in the filter input, as that way I could set a longer timeout that will terminated when the ENTER key is pressed?  For example, I set a 2 second time out, I enter the filter and press enter, the filter is triggered as I press enter and the timeout is obviously cancelled.

[paramvir]

The filter cells in the lazy loading / virtual scrolling examples don't lose focus while filtering the data.

getData is a callback and has nothing to do with focus in filter cell.

If you are calling the filter method manually, try to pass header: false to the filter method.

grid header cell can be obtained by getCellFilter method: https://paramquery.com/pro/api#method-getCellFilter
Then it can be focused by using js / jquery focus() method.

filter can be manually triggered on "Enter" by using column.filter.listener, name of event = "keydown/keyup" -> check event.key == "Enter" in the callback and call filter method manually in the listener callback.

https://paramquery.com/pro/api#option-column-filter

[jplevene]

filter can be manually triggered on "Enter" by using column.filter.listener, name of event = "keydown/keyup" -> check event.key == "Enter" in the callback and call filter method manually in the listener callback.

How do I "call filter method manually in the listener callback"?  Besides using $("#grid").pqGrid("refresh") which does not work, how do I do it as there is no documentation?

filter:{
   crules:[{condition:"contain"}],
   listener: {
      "keydown": function(e, ui){
         if(e.key==="Enter")
            $("#grid").pqGrid("refreshDataAndView"); // <<<< Does not work and clears the filter
      },
      "timeout": function(){ $("#grid").pqGrid("refreshDataAndView"); } // <<<<< If I don't do something here, with "listner" set, it ignores the standard timeout function call
   }
}

P.S. Thanks for the focus hint.

[paramvir]

Here is the API documentation for filter method: https://paramquery.com/pro/api#method-filter

and the values entered in the header filter text box control(s) are available in the listener callback as ui.value and ui.value2 ( in case of 2 textboxes )

https://paramquery.com/pro/api#option-column-filter

[jplevene]

I know how to set it etc. which wasn't my question, I need to trigger the filter to start filtering, as the filters have already been set.

How do I trigger the filter to start programatically in the listner functions listed above?

[paramvir]

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


[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();
      }
   }
}