We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Excel type filter > Custom filter

Thread ID:

Created:

Updated:

Platform:

Replies:

145208 Jun 12,2019 01:03 PM UTC Jul 24,2019 11:18 AM UTC Angular - EJ 2 13
loading
Tags: Grid
Unknown
Asked On June 12, 2019 01:03 PM UTC

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 [Syncfusion]
Replied On June 13, 2019 11:58 AM UTC

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. 

                              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
Replied On June 15, 2019 10:42 AM UTC

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 [Syncfusion]
Replied On June 19, 2019 03:35 AM UTC

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 
    } 



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


Unknown
Replied On June 21, 2019 09:42 AM UTC

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:



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 [Syncfusion]
Replied On June 24, 2019 11:36 AM UTC

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


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

Regards, 
Pavithra S. 
 


Unknown
Replied On June 26, 2019 07:13 AM UTC

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 [Syncfusion]
Replied On June 27, 2019 08:51 AM UTC

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


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


Unknown
Replied On June 28, 2019 05:23 AM UTC

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 [Syncfusion]
Replied On July 1, 2019 11:02 AM UTC

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


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


Unknown
Replied On July 2, 2019 07:55 AM UTC

Hello,

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


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 [Syncfusion]
Replied On July 3, 2019 10:40 AM UTC

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
Replied On July 22, 2019 11:14 AM UTC

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 [Syncfusion]
Replied On July 24, 2019 11:18 AM UTC

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



Regards, 
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon