Performance issue weekly view scheduler with more data.

[Rama]

Dear Support,

We are trying to render schedule data say for 60 resources. We could see that rendering the weekly view is just taking too long. I have attached the sample where you can experience the issue.

Please note that I have tried "allowVirtualScrolling" and that seems to be creating weird rendering issue. 

<ViewDirective option="TimelineWeek" allowVirtualScrolling={true} />

In the attached sample - look at the report.js component. You would "refreshData" method is refreshing the data, in our real app that part is being replaced by call to our api backend.

Can you suggest what we can do to optimize this perf. issue.

One more question - In weekly view - by default we have 2 cells per hour per day. Can we change that say to have only 1 cell per hour or 1 cell per 2 hour to reduce the number of <td/> being generated

Thanks.

Attachment: Sample_d471bbbf.zip

[Vengatesh Maniraj]

Hi Rama, 

Greetings from Syncfusion Support. 

We have validated your reported issue Performance issue in week view scheduler with more data in the shared sample and we suspect that you have rendered the resource in the created event and wait for 2 minutes to generate the resource details which could be the cause for this issue. We suggest you please generate all the resource data and events data before rendering the scheduler to avoid the performance related issues. We have checked the performance issue with the below sample that contains 60 resources and 3600 events and it could be rendered around 2800 milli seconds. 

Sample: https://stackblitz.com/edit/react-xwfa17?file=index.js 

And, you have asked another query that 1 cell per hour to reduce the td count and it can be possible by making use of timescale property like the below code. 

 timeScale={{ enable: true, interval: 60, slotCount: 1 }} 

API: https://ej2.syncfusion.com/react/documentation/api/schedule/#timescale 

This code changes also included in the above shared sample. Kindly check the sample and get back to us for the further assistance. 

Regards, 

Vengatesh  

[Rama]

Hi Vengatesh,

Thank you for your response. But in real world .. It is not realistic to load all the events for all dates from server.

That is why I have create a stub method "refreshData" that simulates data loading from api everytime user changes the date range or view (today, month, week)

What change will you recommend to make if we cannot pre-load entire data

[Vengatesh Maniraj]

Hi Rama, 

Thanks for the update. 

Sorry for the inconvenience. We have re-evaluated the problem at our end and found the cause for the reported problem is that you have missed to setting the height property for the Scheduler. Because the virtual scrolling is not working when we have the height as auto. So we suggest you kindly set the height property to the scheduler to overcome this issue and no need to change anything in your shared sample. For your reference, we have changed the code in your sample which can be downloaded from the below link. 

<ScheduleComponent 

            key="ProjectScheduleComponent" 

            timezone="America/New_York" 

            cssClass="timeline-resource-grouping" 

            width="100%" 

            height="650px" 

            created={onCreated} 

            readonly={true} 

            timeScale={{ enable: true, interval: 60, slotCount: 1 }} 

            currentView="TimelineWeek" 

            eventSettings={{ dataSource: data1 }} 

            group={{ resources: ["Projects", "Agents"] }} 

        > 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample_d471bbbf1012626428  

Regards, 

Vengatesh  

[Rama]

Hi Vengatesh,

I can see that layout issue is fixed when I set height but when I scroll .. browser seems to be getting stuck. That is a separate problem.

But can you please suggest, how do you want me to handle following scenario -

In real world .. It is not realistic to load all the events for all dates from server.

That is why I have created a stub method "refreshData" that simulates data loading from api - every time I get "dateNavigate" OR "viewNavigate" event.

What change will you recommend to make if we cannot pre-load entire data.

[Rama]

Hi Vengatesh,

I updated my sample code by now keeping data ready before component renders - Still Weekly view is causing perf issues - 

Something is not right - I can see that it keeps getting stuck when i click "Weekly". I have attached sample I am referring to - Can you please suggest what am I missing in "report.js" and "reportRenderer.js" - Please use attached sample for optimization

Firefox infact reports it whenever I navigate to weekly view.

Attachment: Sample_b2414b1e.zip

[Rama]

Hi Vengatesh,

I think I am understanding what is causing performance degradation - 

In the sample I sent you - Just remove - "timezone="America/New_York" and see the performance gain of "weekly view" and add it again and you will experience the performance degradation.

Try it on your local instead of stackblitz.

[Vengatesh Maniraj]

Hi Rama, 

Thanks for the update. 

We have check the performance issue with your shared sample and we have considered this as defect and logged the below defect report at our end. We will fix the issue and include the solution in our upcoming patch release. We appreciate your valuable patience until then. 

Feedback: https://www.syncfusion.com/feedback/14354/ 

Regards, 

Vengatesh  

[Rama]

Hi Vengatesh,

Thank for handling this. Can you suggest any ETA for this fix.

[Vengatesh Maniraj]

Hi Rama, 

Sorry for the inconvenience. 

Currently, we are working with performance improvements at our end and we will include the changes in our Volume 2 main release which is scheduled to be rolled on June 29, 2020. We appreciate your valuable patience until then. 

Regards, 

Vengatesh