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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Pagination

Thread ID:

Created:

Updated:

Platform:

Replies:

147452 Sep 11,2019 08:56 AM UTC Sep 12,2019 01:31 PM UTC React - EJ 2 1
loading
Tags: MultiSelectDropdown
Zeng
Asked On September 11, 2019 08:56 AM UTC

Hello.

I want to implement pagination in MultiSelectDropdown because of large data.
Please help me.

Best regards.

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On September 12, 2019 01:31 PM UTC

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 


CONFIRMATION

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