Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Spark
510
Issue about grid filter
posted

In ig gird filter feature.It sends a request to load data when I input each charachter.

This approach can introduce performance issue. Can I make it load data only when I press Tab or Enter?

  • 23953
    Suggested Answer
    Offline posted

    Hi,

    Actually filtering is not triggered on each character input, but on time interval which can be set by filterDelay option. By default it is set to 500 ms, but you can increase that interval.

    We don't have out of the box functionality which triggers filtering on specified key press. This can be achieved by custom code. The steps are:

    1.Set filterDelay option to very high interval, so it will not trigger filtering.

    2.Hook to each column filter keydown event and listen for Enter/Tab key.

    3.When Enter/Tab key is pressed call the igGridFiltering.filter method.

    4.(Bonus step) Cancel the filtering which will be triggered by default after filterDelay time elapses.

    I've implemented sample which demonstrates this functionality for simple filtering.

    Here is the interesting code:

    Code Snippet
    1. $(".ui-iggrid-filterrow.ui-widget").delegate("span.ui-igedit.ui-state-default.ui-widget.ui-corner-all.ui-igedit-container", "igeditorkeydown", function (evt, ui) {
    2.     // listen for Enter key
    3.     if (ui.key === 13) {
    4.         var $gridFiltering = $("#grid1").data("igGridFiltering");
    5.         var colKey = $(this).data("colKey");
    6.         var colIndex = $(this).data("colIndex");
    7.         var searchValue = $(this).data("igEditor").value();
    8.         var condition = $gridFiltering.options.columnSettings[colIndex].condition;
    9.         $gridFiltering.filter([{fieldName: colKey, expr: searchValue, cond: condition}], true);
    10.         // finally cancel the built-in filtering by using the private _timeoutId handle
    11.         clearTimeout($gridFiltering._timeoutId);
    12.     }
    13. });

     

    You can find the whole sample attached to this post.

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

    igGridFiltering_onEnter.zip