How to solve the slow performance issue when dealing with large amounts of data in self-referential data binding

[Wyatt Li]

How to solve the slow performance issue when dealing with large amounts of data in self-referential data binding?

I hope this issue can be resolved, thank you.

[Ajithkumar Gopalakrishnan]

Hi Wyatt,

Greetings from Syncfusion Support,

To meet your requirement, we suggest to use Virtualization feature of the Gantt Chart. This feature used to load large amount of data without performance degradation. In this mode, all tasks are fetched initially from the datasource and rendered in the DOM within a compact viewport area. The number of records displayed in the Gantt is determined by the height. This can be enabled by using enablevirtualization set to true.

Additionally, we have the loadChildOnDemand concept in the Gantt chart. When loadChildOnDemand is disabled, all root nodes are rendered in a collapsed state at the initial load. On expanding a root node, the child nodes are loaded from the remote server. When enableVirtualization is enabled and loadChildOnDemand is disabled, only the current viewport root nodes are rendered in a collapsed state. When a root node is expanded, its child nodes are rendered and maintained in a local collection, so on consecutive expand/collapse actions on the root node, the child nodes are loaded locally instead of from the remote server. When loadChildOnDemand is enabled, parent records are rendered in an expanded state.

Document link: https://ej2.syncfusion.com/vue/documentation/gantt/virtual-scroll#row-virtualization
                            https://ej2.syncfusion.com/vue/documentation/gantt/data-binding#load-child-on-demand

Demo link: https://ej2.syncfusion.com/vue/demos/#/fluent2/gantt/load-on-demand.html

 

<ejs-gantt ref='gantt' id="GanttContainer"

           ...

           :enableVirtualization="true"

           :loadChildOnDemand="false"

           ...

           >

</ejs-gantt>

taskFields: {

    ...

    hasChildMapping: 'isParent',

}

Sample link: https://stackblitz.com/edit/xjfv7p-k33vyb?file=src%2FApp.vue

Contact us if you require any further assistance.

Regards,

Ajithkumar G

[Wyatt Li]

The data currently has more than 1,000 records. On the initial load, the data has already been fetched and bound through a custom API. Is there a solution to this without using DataManager?

[Ajithkumar Gopalakrishnan]

Hi Wyatt,

To achieve your requirement, we suggest using the load event in the Gantt chart. In our sample, we don't use the DataManager; instead, we use the load event, which triggers before the Gantt chart is rendered. During this event, you can update the dataSource using the instance. We have attached a code snippet and sample for reference.

<ejs-gantt ref='gantt' id="virtualscroll"

           :load ="load "

           >

</ejs-gantt>

load: function()

{

    this.$refs.gantt.ej2Instances.dataSource = virtualData; // your dataSource

}

Sample link: https://stackblitz.com/edit/1hytp6-vjgkdf?file=src%2FApp.vue

Contact us if you require any further assistance.

Regards,

Ajithkumar G

[Wyatt Li]

Thank you for your reply, but the performance has not improved.

I found that setting autoCalculateDateScheduling to false significantly improves performance, but validation fails as a result. Is there a way to enable partial dependency validation or date validation to maintain intervals?

[Ajithkumar Gopalakrishnan]

Hi Wyatt,

Query 1: but the performance has not improved.

We have tested rendering 1000 records in the Gantt chart, which takes about 6 to 7 seconds on our end. We have attached an image and video from the performance tab for reference. Please let us know how long it takes on your end to load 1000 records and share your Gantt chart configuration for further validation. If there are complex predecessor connections or any other enabled properties, please share the sample so we can validate and provide detailed feedback.

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/performance1947966894.zip

Query 2: I found that setting autoCalculateDateScheduling to false significantly improves performance, but validation fails as a result. Is there a way to enable partial dependency validation or date validation to maintain intervals?

The above-reported property is set to false, which restricts predecessor validation after load and CRUD operations. It is not feasible to handle partial dependency validation of dates. 

However, after the initial load, you can dynamically update the autoCalculateDateScheduling property in the Gantt chart instance using a button. This allows you to validate dates with dependencies after CRUD actions. And for the initial load, valid data should be given from application end. We have attached a code snippet for reference.

autoCalculateDateScheduling()

{

    this.$refs.gantt.ej2Instances.autoCalculateDateScheduling = !this.$refs.gantt.ej2Instances.autoCalculateDateScheduling;

}

Sample link: https://stackblitz.com/edit/1hytp6-txuaww?file=src%2FApp.vue

Once we receive this information, we will be better equipped to identify the root cause of the issue and provide you with the necessary assistance.

Regards,

Ajithkumar G

[Wyatt Li]

Identified the key point for improvement: the large amount of holiday data is causing performance bottlenecks. Reducing data by setting weekends as fixed holidays can help, but how can we set fixed holidays as working days instead?

Additionally, when using virtual scrolling, sometimes the taskbar colors render incorrectly.

Attachment: sp240626_162303_3c7bc0dc.zip

[Ajithkumar Gopalakrishnan]

Hi Wyatt,

Query 1:   Identified the key point for improvement: the large amount of holiday data is causing performance bottlenecks.

We are rendering 1000 records with 40 holidays, which takes 6 to 7 seconds on our end. We have attached an image and video from the performance tab for reference. Share your Gantt chart holiday count, or replicate our sample so we can validate and provide further details.

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/performance1869816543.zip



Query 2:   Reducing data by setting weekends as fixed holidays can help, but how can we set fixed holidays as working days instead?

We can consider weekends as working days because Saturday and Sunday are always weekends. By enabling the includeWeekends property, these days will be treated as working days. However, since holidays occur on random days, they cannot be consistently handled as working days, making it unfeasible to address this requirement.

Query 3:   Additionally, when using virtual scrolling, sometimes the taskbar colors render incorrectly.

We have attached an image for reference. We need clarification on the behavior of the Gantt chart. If a child or parent taskbar's progress is 100%, the progress value will update in that color. This is the expected behavior of the Gantt chart.

Sample link : https://stackblitz.com/edit/1hytp6-ouukmv?file=src%2FApp.vue

Regards,
Ajithkumar G