Contains Filter on drop down using async pipe in data source

[Jaco Roux]

Good day,

I want to know if it is possible to use the filtering event to change filter type on the DropDownList to use contains.

I normally use it and it is working but for this scenario I am binding using the async pipe and that means that the datasource is now an Observable and not a a normal Object so the updateData method using query can not update the observable.

[Sureshkumar P]

Hi Jaco, 

 

Greetings from Syncfusion support. 

 

We can set the filtertype property value as ‘contains’ to achieve your requirement.  

 

Kindly refer the below code example. 

 

[app.component.html] 

 

<ejs-dropdownlist id='remoteData' #remote [dataSource]='data | async' [filterType]='filterType' [allowFiltering]='true' 

    [fields]='remoteFields' [placeholder]='remoteWaterMark' sortOrder='Ascending'></ejs-dropdownlist> 

 

[app.component.ts] 

@ViewChild('remote') 

  public multiselectObj: DropDownListComponent; 

  public data: any; 

  constructor(private http: HttpClient) { 

 

  } 

  ngOnInit() { 

    this.getData(); 

  } 

 

  public getData() { 

    this.data = this.http.get<{ [key: string]: object; }[]>('https://services.odata.org/V4/Northwind/Northwind.svc/Orders').pipe( 

      map(data => { 

        return (<any>data).value; 

      }) 

    ); 

  } 

  public remoteFields: Object = { text: 'CustomerID', value: 'CustomerID' }; 

  // set the placeholder to MultiSelect input element 

  public remoteWaterMark: string = 'Select names'; 

  public filterType: any = 'Contains'; 

@ViewChild('remote') 

  public multiselectObj: DropDownListComponent; 

  public data: any; 

  constructor(private http: HttpClient) { 

 

  } 

  ngOnInit() { 

    this.getData(); 

  } 

 

  public getData() { 

    this.data = this.http.get<{ [key: string]: object; }[]>('https://services.odata.org/V4/Northwind/Northwind.svc/Orders').pipe( 

      map(data => { 

        return (<any>data).value; 

      }) 

    ); 

  } 

  public remoteFields: Object = { text: 'CustomerID', value: 'CustomerID' }; 

  // set the placeholder to MultiSelect input element 

  public remoteWaterMark: string = 'Select names'; 

  public filterType: any = 'Contains'; 

 

 

We have created a sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-guucqq-w9wfww?file=app.component.ts  

 

Regards, 

Sureshkumar P 

[Jaco Roux]

Thank you it works perfectly

[Sureshkumar P]

Hi Jaco, 

 

Thanks for your update. Please get back to us if you need further assistance on this 

 

Regards, 

Sureshkumar P