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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding a large list takes too long

Thread ID:





148775 Nov 4,2019 06:44 AM UTC Nov 4,2019 10:04 AM UTC Angular - EJ 2 1
Tags: MultiSelectDropdown
Samir Modi
Asked On November 4, 2019 06:44 AM UTC

Hi Team,

I have two dropdowns. On select of first one, I am populating list in the second dropdown by binding values. The problem is if the list is too large, the UI hangs for good 10 seconds and then loads the list. Is there any solution to this? 

Do we have virtual scrolling supported in this component? Another way I would like is to type in few characters (say 3 or 4 ) and make a call to api to bring related items only. That way only searched items will be binded and not all.

Thanks in advance!

Sureshkumar P [Syncfusion]
Replied On November 4, 2019 10:04 AM UTC

Hi Samir, 
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 multiselect control and bind the scroll event for the popup list event. Kindly refer to the following code snippet 
public onOpen(args){ 
    let start: number = 7; 
    let end: number = 12; 
    let listElement: HTMLElement = (this.multiselectObj as any).list; 
    listElement.addEventListener('scroll', () => { 
        if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) { 
            let filterQuery = this.multiselectObj.query.clone(); 
            this.data.executeQuery(filterQuery.range(start, end)).then((event: any) => { 
                start = end; 
                end += 5; 
                this.multiselectObj.addItem(event.result as { [key: string]: Object }[]); 
            }).catch((e: Object) => { 
We created a sample based on your requirement. please refer the sample here: https://stackblitz.com/edit/angular-lm3yxp-cxdfbh?file=app.component.ts  
Also, to limit the number of requests to send to server, we suggest to refer the below documentation. 
Sureshkumar P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon