Add additional params in filtersearchbegin

[Unknown]

Hello,

I am using remote data and Excel filter in my grid. When I am typing in my filter search box I want to pass additional parameters to request query to WebAPI. I am trying to do it in actionBegin method when requestType is filtersearchbegin but it works incorrectly (maybe I am doing it too late bus I do not know when to do it). With request query into WebAPI is sending not current data but previous types value. At first I can not see my additional parameter but when I am typing again request my additional parameters are passes but value is previous.

I reproduced my problem in this example: https://stackblitz.com/edit/angular-tww3dj-mz6pnk?file=app.component.ts

1. Typing first time

2. After request typing again

[Pavithra Subramaniyam]

Hi AC, 

Thanks for contacting Syncfusion support. 

We have validated your requirement. You can achieve your requirement by “onKeyPress” event of the search input box. Using this event you can send the params dynamically by using “addParams” for each keystroke. 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"> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerID' headerText='Customer ID' width='160'></e-column> 

            <e-column field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='150' format="C2" textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150' ></e-column> 

        </e-columns> 

    </ejs-grid> 

 

App.component.ts 

export class AppComponent { 

    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') { 

      args.filterModel.sInput.onkeypress = this.addfilterParams.bind(this);   // binding onKeyPress event for searchBox 

    } 

    } 

    public addfilterParams (args) { 

      this.query = new Query(); 

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

        this.grid.query = this.query; 

        console.log(args, this.query) 

    } 

} 

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

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

 

Regards, 

Pavithra S. 

 

[Unknown]

Hello,

you sample URL is not working :(

I tried to do it in my previous sample but in this case I am still seeing previous inserted value and additional parameters are not passed with query.

Sample: https://stackblitz.com/edit/angular-tww3dj-hsxcdp?file=app.component.ts

After first value insert in searchBox additional parameters are not passed and in console like value I see previous value:

[Pavithra Subramaniyam]

Hi AC, 

 

Thanks for the update. 

 

we have validated your query and We suggest you to bind “onkeyup” event instead of onkeypress event to achieve your requirement. 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">  

        <e-columns>  

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>  

            <e-column field='CustomerID' headerText='Customer ID' width='160'></e-column>  

            <e-column field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right'></e-column>  

            <e-column field='Freight' headerText='Freight' width='150' format="C2" textAlign='Right'></e-column>  

            <e-column field='ShipCountry' headerText='Ship Country' width='150' ></e-column>  

        </e-columns>  

    </ejs-grid>  

  

App.component.ts 

 

export class AppComponent { 

    public data: DataManager; 

    public pageSettings: Object; 

    public filteringSettings = { type: 'Excel' }; 

    public query: 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') {  

      args.filterModel.sInput.onkeyup = this.addfilterParams.bind(this);   // binding onkeyup event for searchBox  

    }  

    }  

    public addfilterParams (args) {  

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

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

    }  

} 

 

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

 

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

 

Regards, 

Pavithra S.