Hi Gowthami,
Greetings from Syncfusion support.
We have checked your query. While working with huge amount of data, we suggest you use Virtual Scrolling technique which loads items on demand. We can achieve this by loading items manually on scrolling. Here we have initially loaded some 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 dropdownlist control and bind the scroll event for the popup list event. Kindly refer to the following code snippet
|
this.onOpen = e => {
var operator = new Query();
var start = 7;
var end = 12;
var listElement = this.listObj.list;
listElement.addEventListener("scroll", () => {
if (
listElement.scrollTop + listElement.offsetHeight >=
listElement.scrollHeight
) {
var filterQuery = operator.clone();
this.data
.executeQuery(filterQuery.range(start, end))
.then(event => {
start = end;
end += 5;
this.listObj.addItem(event.result);
})
.catch(e => {});
}
});
};
}
|
Please check the above sample and get back to us if you need further assistance.
Regards,
Sevvandhi N
