dropdownlist remote pagination with scroll

[Emran Sadeghi]

hi

i create dropdownlist and i set dataSource to Observable<any> and this.datasource has param property that can set for pagin like PageNumber and PageSize, how can i configure ejs-dropdownlist to fetch next data when scroll down for next page?

ts:

this.dropdownList = this.dataSource.data$.pipe(map(q => q.data.items));

html :

<ejs-dropdownlist

  #singleSelect

  *ngIf="!this.multiSelection"

  [enableRtl]="true"

  [dataSource]='dropdownList | async'

  [(value)]="selectedItems"

  (change)="onModelChange($event)"

  [fields]="fields"

  [placeholder]="placeholder"

  [allowFiltering]="true"

  [showDropDownIcon]="true"

  (filtering)="filtering($event)"

  filterBarPlaceholder='Search countries'

  [showClearButton]="true"

  (dataBound)="dataBound($event)"

  >

</ejs-dropdownlist>

[Berly Christopher]

Hi Emran, 

  

Greetings from Syncfusion support.  

  

We have already considered “Virtual scrolling with pagination support in Multiselect component” as feature and added to our feature request list. It will be implemented in any of any upcoming releases.  

  

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.      

  

Feedback Link: https://www.syncfusion.com/feedback/9773/        

  

As per your requirement for loading large data we suggest you to use the virtual scrolling to get rid of the reported issue. When scrolling, the request is sent and fetch some amount of data from the server dynamically. Using the scroll event, get the data and generate the list add to popup using the addItem method. Please find the test sample and code snippet below for reference.  

  

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

  

Regards, 

Berly B.C