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:



PS Pavithra Subramaniyam Syncfusion Team June 19, 2019 12:21 PM UTC

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); 
    }  
} 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon