How to change the default filter type to "Contains" in DropDownList

[Evgeny Agusev]

Hi, I want to use filter type Contains by default in DropDownList. Is it possible?

Thanks.

[Christopher Issac Sunder K]

Hi Evgeny, 

Thanks for contacting Syncfusion Support.  

We suggest you to change the filter type as “contains” through filtering event of DropDownList as shown below 

public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => { 

        let query: Query = new Query(); 

        //frame the query based on search string with filter type. 

        query = (e.text !== '') ? query.where('Name', 'contains', e.text, true) : query; 

        //pass the filter data source, filter query to updateData method. 

        e.updateData(this.data, query); 

    } 

We have prepared a sample for reference. Please refer to the below given link 

https://stackblitz.com/edit/angular-criak2  

UG : https://ej2.syncfusion.com/angular/documentation/drop-down-list/filtering/#change-the-filter-type 

Please let us know if you need any further assistance. 

Thanks,
Christo

[Jaco Roux]

Hi Evgeny, 

Thanks for contacting Syncfusion Support.  

We suggest you to change the filter type as “contains” through filtering event of DropDownList as shown below 

public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => { 

        let query: Query = new Query(); 

        //frame the query based on search string with filter type. 

        query = (e.text !== '') ? query.where('Name', 'contains', e.text, true) : query; 

        //pass the filter data source, filter query to updateData method. 

        e.updateData(this.data, query); 

    } 

We have prepared a sample for reference. Please refer to the below given link 

https://stackblitz.com/edit/angular-criak2  

UG : https://ej2.syncfusion.com/angular/documentation/drop-down-list/filtering/#change-the-filter-type 

Please let us know if you need any further assistance. 

Thanks,
Christo

How do handle this when you are using the | async pipe to bind data?

The data will be an Observable so the query with updateData can't work.

[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