Ways to implement pagination on Resource View

[Kyle B]

I am looking for advice on how to paginate a SfCalendar Resource View. What I would need to paginate is the Resources, either through lazy loading using a Scroll Controller attached to SfCalendar (I did not see this supported), or using physical page buttons. We use Flutter Bloc for state management, and page size and page number are already supported, it's just a matter of making it work with SfCalendar, has anyone done this? Does anyone know limitations of the Resource View? How many Resourc

[Praveen Balu]

Hi Kyle B,

 

To implement pagination in the Resource View of SfCalendar, we recommend managing the total number of resources, appointments, and pages within your Bloc architecture. For better understanding, we’ve prepared a workaround to help you achieve pagination in Resource View. Please follow the steps below for a detailed explanation of the sample:

 

• Bloc for State Management: As you mentioned, used Bloc for state management. It handles the currentPage, pageSize, totalResourcesCount, and the specific CalendarResource and Appointment lists to be displayed.
• Resource and Appointment Handling: In our sample, the Bloc manages 20 example CalendarResource items and their appointments.
• Page Size Configuration: Each page in our sample is set to show 5 resources, and a total of 4 pages is available in this sample.
• Physical Navigation Buttons: Added two buttons, the Previous Page and Next Page for page navigation.
• SfCalendar Integration: The SfCalendar widget is directly connected to the Bloc's state. When the page changes, SfCalendar automatically updates with the new resources and appointments.

We have also attached the sample along with the demo for your reference, you can modify the sample based on your requirements. If you have any further queries, please feel free to reach out to us.

Regards,
Praveen Balu.

Attachment: forum_197514_ac4448e2.zip

[Kyle B]

Praveen,

Thank you for your quick and very detailed response, I will work on implementing this.

[Praveen Balu]

Hi Kyle B,

You are welcome. Please feel free to reach out if you need any further assistance.

Regards,

Praveen Balu.

[Kyle B]

Praveen,

I am about to implement this because our Flutter SfCalendar is having laggy performance when moving the resource view (scrolling either horizontally or vertically). However, this is only occurring when we load the app for the first time in the web browser, or when we first launch the app from Android Studio locally. The problem occurs on computers which do not have a dedicated GPU. The solution for this we have found is to refresh the page, at which time scrolling on the SfCalendar widget is very fast and responsive, not laggy like it was before. I am being told this is due to GPU/shader loading. The only permanent solution we have found is to limit the number of resources (through page size) to ~20-30, and use pagination to load additional resources. Do you know of another solution to this issue?

edit: The resource count during laggy performance was 83

[Praveen Balu]

Hi Kyle B,

As you mentioned, we also recommend displaying a limited number of resources [10 to 20 resources] at a time and using pagination to load additional resources to improve the performance of scrolling in the resource view.

Additionally, to address the large number of resources, we have planned to provide load more support for resources and have already logged a feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature using the feedback link below.

FR link - Provide a onLoadMore callback support for resources in the Flutter Calendar (SfCalendar) in Flutter | Feedback Portal.

Regards,

Praveen Balu.