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

How to filter server-side DropDownList data bound using async pipe?


I have the following setup where data is bound to a DropDownList using async pipe.

Here is my service:

public get(state: any): void {
this.getListData(state).subscribe(x => super.next(x));

getListData(state: DataStateChangeEventArgs): Observable {
const options = this.getOptions(state);
return this.search(options);

private search(options): Observable<{}> {
return this.service.search(options)
.pipe(map((response: any) => {
return response['content'];
catchError((err, caught) => {
return of([]);

Here is my component:

public data: Observable;
public fields: Object = { value: 'id', text: 'title' };
public state: DataStateChangeEventArgs;

constructor(public service: MyService) {
this.data = service;

ngOnInit(): void {
this.state = { skip: 0, take: AppConfig.gridDefaults.pageSize };

Here is the html template:

<ejs-dropdownlist [dataSource]='data | async' [fields]='fields' [allowFiltering]="true" (filtering)="onFiltering($event)"></ejs-dropdownlist>

The data binding works well and the DropDownList gets populated with data.

What code is needed to filter the data? Filtering should take place server-side. Should I pass a predicate to the state property and call this.service.get again?

Can you provide a sample?

Thank you in advance,

1 Reply 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team December 30, 2022 06:48 AM UTC

Marked as answer
Live Chat Icon For mobile
Up arrow icon