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

Add additional params in filtersearchbegin

Thread ID:

Created:

Updated:

Platform:

Replies:

145281 Jun 15,2019 09:44 AM UTC Jun 19,2019 12:21 PM UTC Angular - EJ 2 3
loading
Tags: Grid
Unknown
Asked On June 15, 2019 09:44 AM UTC

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


Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 


Unknown
Replied On 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:


Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


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