Filter Drop down list component on multiple columns?

[MM]

Hello,

What is the best approach to filter Drop down list component on multiple columns?

For example, I want to filter customer objects by FirstName and LastName...

Thank you,

M

[Ponmani Murugaiyan]

Hi MM,   

  

Greetings from Syncfusion support. 

 

You can filter the multiple columns or fields in DropDownList component by using custom filtering and predicate as like below code snippet. 

 

[app.component.html] 

 

<ejs-dropdownlist  id='multiselectelement' #sample [dataSource]='data' [fields]='fields'  [placeholder]='text' [allowFiltering]='true' (filtering)='onFiltering($event)'> 

  <ng-template #itemTemplate="" let-data=""> 

    <!--set the value to itemTemplate property--> 

      <div><span class='name'>{{data.FirstName}}</span><span class ='city'>{{data.LastName}}</span></div>      

  </ng-template> 

   <ng-template #valueTemplate="" let-data=""> 

          <!--set the value to valueTemplate property--> 

          <span class='value'>{{data.FirstName}} {{data.LastName}}</span> 

      </ng-template> 

</ejs-dropdownlist> 

 

 

 

[app.component.ts] 

 

public onFiltering =  (e: FilteringEventArgs) => { 

    let query = new Query(); 

    let predicateQuery = query.where(new Predicate('FirstName', 'contains', e.text, true).or('LastName', 'contains', e.text, true)); 

    query = (e.text !== '') ? predicateQuery : query;   

    e.updateData(this.data, query); 

}; 

 

 

 

Sample: https://stackblitz.com/edit/angular-qnm3yr-pemwcy?file=app.component.html 

 

Kindly check with the above sample. Please get back us if you need further assistance.  

 

Regards,  

Ponmani M 

[MM]

Thank you, Ponmani M.

This is exactly the example that I needed.

[Ponmani Murugaiyan]

Hi Maja,  

Thanks for your update.  

We have glad to hear that the provided suggestion helped you in achieving your requirement.  

Please get back to us if you need further assistance.  

Regards,  

Ponmani M