Add a debounce/timeout function custom filter dialog

[Sreevatsan]

Inside the custom filter dialog can we add a debounce/timeout function for the api call inside actionBegin/actionComplete function?. I need to prevent api calls on each keypress inside the  'Enter the value' section. I am using dataManager. 

[Pavithra Subramaniyam]

Hi Sreevatsan,

You can delay the filtering via the custom filter popup of the string column by adding the delay inside the “filtering” event of EJ2 Autocomplete event. You can bind this event handler to this custom popup filter component using the “column.filter.params” property. Please refer to the below code example and API link for more information.

        <e-column field='CustomerID' :filter='stringParams' headerText='Customer ID' width=120 :validationRules='customerIDRules'></e-column>

 

const stringParams = {

  params: {

    filtering: (e) => {

      e.preventDefaultAction = true;

      let query = new ej.data.Query();

      // frame the query based on search string with setTimeOut filter type.

      query =

        e.text !== ''

          ? query.where('CustomerName', 'startswith', e.text, true)

          : query;

      // pass the filter data source, filter query to updateData method.

      setTimeout(function () {

        debugger;

        e.updateData(data, query); // here data is the data bound to the EJ2 Grid

      }, 1000);

    },

  }

}

 

 

https://ej2.syncfusion.com/vue/documentation/api/auto-complete#filtering

Please get back to us if you need further assistance on this.

Regards,

Pavithra S