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. Image for the cookie policy date

Add additional params in filtersearchbegin

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.


1. Typing first time

2. After request typing again


3 Replies

PS Pavithra Subramaniyam Syncfusion Team June 17, 2019 08:51 AM UTC

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



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



UN Unknown Syncfusion Team June 18, 2019 09:07 AM UTC

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.


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