How to achieve Lazy loading in Scheduler

Hi. We have the following design of your scheduler:

Image_3187_1726041182165

How can we achieve lazy loading in the vertical direction, if we have thousands of data rows?
What are the correct events?
How to calculate the correct number of data over the API for the request?
And how to use/set the scrollbar for this functionality?

Best regards


1 Reply

VR Vijay Ravi Syncfusion Team September 12, 2024 09:46 AM UTC

Hi ZMI Dev, 

How can we achieve lazy loading in the vertical direction, if we have thousands of data rows?

What are the correct events?

Based on your requirements, I would suggest enabling the enableLazyLoading property by setting it to true. Please refer to the following demo and user guide for further reference.

EnableLazyLoading demo: https://ej2.syncfusion.com/demos/#/bootstrap5/schedule/data-virtualization.html

EnableLazyLoading UG: https://ej2.syncfusion.com/documentation/schedule/virtual-scrolling#enabling-lazy-loading-for-appointments

enableLayLoading api: https://ej2.syncfusion.com/documentation/api/schedule/views/#enablelazyloading

[index.ts]
 

views: [

        { option: 'TimelineMonth', enableLazyLoading: true }

],


How to calculate the correct number of data over the API for the request?

You can use data virtualize with virtual scrolling feature. Refer the below shared demo for your reference.

VirtualScrolling: https://ej2.syncfusion.com/demos/#/bootstrap5/schedule/virtual-scrolling.html

allowVirtualScrolling api: https://ej2.syncfusion.com/documentation/api/schedule/views/#allowvirtualscrolling

[index.ts]
 

views: [

            { option: 'TimelineMonth',  allowVirtualScrolling: true, enableLazyLoading: true },

            { option: 'Month', allowVirtualScrolling: true, enableLazyLoading: true }

        ],


And how to use/set the scrollbar for this functionality?

In your sample, when more resource data is provided, the scrollbar should render automatically by default.

Regards,

Vijay


Loader.
Up arrow icon