Hi Zeng,
Thank you for contacting Syncfusion support.
We have checked your query and we suggest you use Virtual Scrolling technique which loads items on demand while having huge amount of data. We can achieve this by loading items manually on scrolling. Here we have initially loaded the 10 items using take property in query. And when you scroll the popup dynamically we have updated the list items by demand. We can use the open event in the multi select control and bind the scroll event for the popup list event. Please refer to the below code snippet,
Code Snippet
|
this.query = new Query().select(['CustomerID']).take(10);
onOpen(args){
if(!this.isInitial){
var start = 7;
var end = 12;
var listElement = this.multiselectObj.popupObj.element.firstChild;
listElement.addEventListener('scroll', () => {
if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) {
var filterQuery = this.query.clone();
this.data.executeQuery(filterQuery.range(start, end)).then((event) => {
start = end;
end += 5;
this.multiselectObj.addItem(event.result);
}).catch((e) => {
});
}
})
}
} |
Could you please check the above details and get back to us, if you need any further assistance on this?
Regards,
Vinoth Kumar S
