Grid Excel type filter > Custom filter

[Unknown]

Hello,

I am working with Grid Excel filter and trying to use custom filter from excel filter. It there any event when I am typing in its value box? I tried to get event actionBegin or actionComplete but they are not triggered in this case.

Also is there a possibility to set spinner while waiting for answer from WebAPI when typing in this value box?

And also to wait while user stops typing? Because now if user typing a little slower - there will be many request to WebAPI.

[Pavithra Subramaniyam]

Hi AC, 

Thanks for contacting Syncfusion support. 

Query#1: Is there any event when I am typing in its value box? I tried to get event actionBegin or actionComplete but they are not triggered in this case. 

 

We have validated your requirement. You can achieve your requirement by using filterTemplate property of the Grid column. Using this property we can render other components like (dropdown, numerictext box) inside the Excel filter dialog instead of search value box. While using that change event of the component will trigger while typing.  Please find the below documentation links for more information. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/#excel-filter 

                              https://ej2.syncfusion.com/documentation/api/drop-down-list/#change 

                              https://ej2.syncfusion.com/documentation/api/numerictextbox#change 

Query#2: Also is there a possibility to set spinner while waiting for answer from WebAPI when typing in this value box? 

And also to wait while user stops typing? Because now if user typing a little slower - there will be many request to WebAPI. 

 

By default Grid string column filters will be enabled with autoComplete, So while typing for each key stroke it will send request to server to display suggestions. Grid filtering will be only started after clicking “filter” button of the Dialog. So you can also achieve this requirement using the filterTemplate. 

Please get back to us if you need further assistance. 

Regards, 

Pavithra S. 

 

[Unknown]

Hello,

so as I understand there are no event that triggers in this case if I do not want to use custom template for filters? Because I do not need my custom template if I can pass additional parameters on request query while typing in default search box.

[Pavithra Subramaniyam]

Hi AC, 

Thanks for the update. 

we have validated your requirement. You can achieve your requirement by binding keyup event to the searchbox. We have prepared a sample for your reference. Please find the below code snippet and sample for your reference. 

App.component.html 

<ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [filterSettings]='filteringSettings' allowFiltering='true' (actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)" [query]="query"> 

         . . . 

    </ejs-grid> 

App.component.ts 

export class AppComponent { 

    public data: DataManager; 

    public pageSettings: Object; 

    public filteringSettings = { type: 'Excel' }; 

    public query: Query = new Query(); 

    @ViewChild('grid') 

    public grid: GridComponent; 

    ngOnInit(): void { 

        this.data = new DataManager({ url: SERVICE_URI + 'api/Orders', adaptor: new WebApiAdaptor }); 

        this.pageSettings = { pageCount: 3 }; 

    } 

    public onActionBegin(args) { 

    

    } 

    public onActionComplete(args) { 

       

      if (args.requestType == 'filterafteropen') { 

          document.body.addEventListener('click', (args: any)=> { 

            if (args.target.id && args.target.id.indexOf('xlfl-frstvalue') > 0 || args.target.id.indexOf('xlfl-secndvalue') > 0 ) { 

              args.target.onkeyup = this.addfilterParams.bind(this); 

            } 

          }); 

    } 

    } 

    public addfilterParams (args) { 

         // here you can send youraddparams for each keystroke 

    } 

} 

Sample: https://stackblitz.com/edit/angular-filter-addparams-145281-customfilter?file=app.component.ts 

Please get back to us, if you need further assistance. 

 

Regards, 

Pavithra S. 

[Unknown]

Hello,

I am using your example and tried to add additional params to query while typing in searchbox value but I am unable to do that. Maybe I am doing something wrong?

In my console I can see that in my query I have that parameters by I can not see them in request to WebAPI:

This is sample code I am using: https://stackblitz.com/edit/angular-filter-addparams-145281-customfilter-ywuoek?file=app.component.ts

Also if I just opened this window and start typing text - event is not trigered because there was no click that triggers on addEventListener. What can I do in this case?

[Pavithra Subramaniyam]

Hi AC 

Thanks for your update. 

We have validated your requirement and also by considering your case we have used ‘DOMSubtreeModified’ event of the window to achieve your requirement. As we said earlier while typing for each key stroke autoComplete will send request to server to display suggestions. So to send params while typing we need to add the Params through autoComplete query as below. We have prepared a sample for your convenience. Please find the below code snippet and sample for more information. 

App.component.html 

<ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [filterSettings]='filteringSettings' allowFiltering='true' (actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)" [query]="query"> 

    . . . 

    </ejs-grid> 

App.component.ts 

    public onActionComplete(args) { 

       

      if (args.requestType == 'filterafteropen') { 

        window.addEventListener('DOMSubtreeModified', (args: any)=> { 

            if (args.target.id && args.target.id.indexOf('xlfl-frstvalue') > 0 || args.target.id.indexOf('xlfl-secndvalue') > 0 ) { 

              if(typeof args.target.onkeyup !== 'function') { 

              args.target.onkeyup = this.addfilterParams.bind(this);   //binding onkeyup event for autocomplete element 

              } 

            } 

          }) 

    } 

    } 

    public addfilterParams (args) { 

         // here you can send your addparams for each keystroke 

           let autoComplete = args.target.ej2_instances[0];   //autoComplete instance. 

          autoComplete.query.addParams("where" + args.currentTarget.value, args.currentTarget.value);   

          //adding addParams to autoComplete query  

          console.log(args, 'Query: ', autoComplete.query.params, args.currentTarget.value);  

    } 

Sample: https://stackblitz.com/edit/angular-145281-keyup-addparams?file=app.component.ts 

Please get back to us, if you need further assistance. 

Regards, 

Pavithra S. 

 

[Unknown]

Hello,

now it is working for passing additional parameters or request while typing.

But I get one more problem . I want to pass additional params by column name in witch I am typing. I try to type text in first column - I get correct columnName. After that I try to type in second column but I get same (first column) column name.

My sample code: https://stackblitz.com/edit/angular-145281-keyup-addparams-ehrrgn?file=app.component.ts (in my addFilterParams I want to pass actionComplete args to get columnName for my additional parameters)

[Pavithra Subramaniyam]

Hi AC, 

Thanks for your update. 

we have validated your requirement. You can get the current filtering column details in actionComplete event . We have modified the sample that you have sent to us.  Please find the below code snippet and sample to achieve your requirement. 

export class AppComponent { 

  public columnName: string; 

  public columnType: string; 

  @ViewChild('grid', { static: true }) 

  public grid: GridComponent; 

. . . 

  public onActionComplete(args) { 

    const angularArgs = args; 

    const angularObj = this; 

    if (args.requestType == 'filterafteropen') { 

      this.columnName = args.columnName;   //store the current columnName in type 

      this.columnType = args.columnType; 

      document.body.addEventListener('DOMSubtreeModified', (args: any) => { 

        if (args.target.id && args.target.id.indexOf('xlfl-frstvalue') > 0 || args.target.id.indexOf('xlfl-secndvalue') > 0) { 

          if (typeof args.target.onkeyup !== 'function') { 

            args.target.onkeyup = this.addfilterParams.bind(angularObj, angularArgs, args); 

          } 

        } 

      }) 

    } 

  } 

  public addfilterParams(args, args2, args3) { 

    console.log(args, args2, args3, this.columnName, this.columnType) //, 'Query: ', autoComplete.query.params, args.currentTarget.value);  

    // here you can send youraddparams for each keystroke 

    // let autoComplete = args.target.ej2_instances[0]; 

    // autoComplete.query.addParams("where" + args.currentTarget.value, args.currentTarget.value); 

  } 

} 

Sample: https://stackblitz.com/edit/angular-145281-keyup-addparams-rvbrzw?file=app.component.ts 

Please get back to us, if you need further assistance. 

 

Regards, 

Pavithra S. 

[Unknown]

Hello,

thank you very much, now it is working correctly. Also I have one more question - is there a possibility to set some debounce time before querying to WebAPI? I want to wait for user to stop typing in autocomplete box and only after that request to WebAPI with my additional parametes. I tries to do it using 'lodash' but it only pushes my additional parameters later but still querying every time on typing with new automatically generated 'where' parameters.

[Pavithra Subramaniyam]

Hi AC, 

Thanks for contacting Syncfusion support. 

we have validated your requirement. Yes, You can set “debounce” before querying to webApi. You can set your own time delay as per your requirement. 

Please find the below code snippet and sample for your reference. 

App.component.ts 

import {  debounce } from '@syncfusion/ej2-base'; 

document.body.addEventListener('DOMSubtreeModified', (args: any) => { 

        if (args.target.id && args.target.id.indexOf('xlfl-frstvalue') > 0 || args.target.id.indexOf('xlfl-secndvalue') > 0) { 

          if (typeof args.target.onkeyup !== 'function') { 

            this.searchHandler = debounce(this.addfilterParams.bind(angularObj, angularArgs, args), 200);
// you can set your time delay here in (milliseconds) 

            args.target.onkeyup = this.searchHandler; 

          } 

        } 

      }) 

Sample: https://stackblitz.com/edit/angular-145281-keyup-addparams-debounce?file=app.component.ts 

Please get back to us, if you need further assistance. 

 

Regards,  

Pavithra S. 

 

[Unknown]

Hello,

debounce for request is working, but now I can not get typing value with debounce, because args.currentTarget is null.

This is sample: https://stackblitz.com/edit/angular-145281-keyup-addparams-debounce-fyavwf?file=app.component.ts

And I am getting this error while trying to console args.currentTarget.value:

As mentioned before I need this value to add to add to my request query but with debounce I again can not set it correctly

[Pavithra Subramaniyam]

Hi AC, 

 

We have checked your query and due to debouncing the current target is undefined which is the cause of reported error. However you can get the value by using the “args.target.value”. 

 

Regards, 

Pavithra S. 

[Unknown]

Hello,

with this issue the code still works not how I want. In my method it goes only one time but I am still getting request to WebAPI with every click so in that case I get mixed up responses from WebAPI and sometimes see wrong result.

For example if I insert text Post in my filter I get 4 requests and can not control from which request I get the last response.

[Seeni Sakthi Kumar Seeni Raj]

Hi AC, 

Thanks for your update. 

we have validated your requirement. You can achieve your requirement by using minLength property of the autoComplete. 

By default minLength value will be 1. So as per your requirement you can adjust the minLength. Also you can add the your addParams inside the filtering event of the autoComplete. Instead of debounce we suggest you to use the below code to achieve your requirement in actionComplete event of the Grid. 

Please find the below code snippet and sample for more information. 

App.componment.html 

    <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [filterSettings]='filteringSettings' allowFiltering='true' (actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)"> 

    </ejs-grid> 

 

App.component.ts 

public onActionComplete(args) { 

    const angularArgs = args; 

    const angularObj = this; 

    if (args.requestType == 'filterafteropen') { 

      this.columnName = args.columnName;9 

      this.columnType = args.columnType; 

      document.body.addEventListener('DOMSubtreeModified', (args: any) => { 

        if (args.target.id && args.target.id.indexOf('xlfl-frstvalue') > 0 || args.target.id.indexOf('xlfl-secndvalue') > 0) { 

          if(args.target.classList.contains('e-control') && args.target.classList.contains('e-autocomplete')){ 

               this.autoCompleteObj = args.target['ej2_instances'][0]; 

               this.autoCompleteObj.minLength = 5;   //By setting minLength as 5 it will not sent request until the 5 letters are entered.  

               this.autoCompleteObj.filtering = function(args){ 

                 //here you can pass your addparams as per your requirement 

                if (args.text.length >= (this as AutoComplete).minLength)  

                { 

                  (this as AutoComplete).query.addParams('where'+ args.text, args.text); 

                } 

               } 

          } 

        } 

      }) 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-145281-keyup-addparams-debounce?file=app.component.ts 

Regards, 

Seeni Sakthi Kumar S.