How to add more items from server side, on scroll of list

[Tuariq]

Team,

I have requirement where on scrolling the list, more items need to be shown.

I referred this document where scroll event is binded when pop up is opened: 

Reference

The issue here is, a new handler is getting binded each time pop up is opened and closed, hence on scrolling multiple times items are fetched and added into list.

How to bind just once? or remove the handler once pop up is closed?

Thanks

Tuariq

[Tuariq]

Attaching post link: https://www.syncfusion.com/forums/156344/dropdown-with-huge-data

[Sureshkumar P]

Hi Tuariq, 

 

Greetings from Syncfusion support. 

 

We can unbind the scoll event when close the popup in dropdownlist component using close event. 

 

Please refer the code example here: 

[sample.html] 

 

<ejs-dropdownlist id='remoteData' #remote [dataSource]='data' [fields]='remoteFields' [query]='query' [placeholder]='remoteWaterMark' (open)="onOpen($event)" (close)="onClose($event)"></ejs-dropdownlist> 

 

 

[sample.ts] 

 

public onClose() { 

    let listElement: HTMLElement = (this.dropdownObj as any).list; 

    listElement.removeEventListener('scroll', () => { }); 

  } 

 

 

We have modified the sample. please find the sample here: https://stackblitz.com/edit/angular-guucqq-rvoexd?file=app.component.ts  

 

Regards,
Sureshkumar P