[BUG] - Syncfusion Data Not Loading and Freezing the UI

[Prabhat Thakur]

Hi Team,

I'm currently using the Syncfusion Gantt Chart, and I'm experiencing an issue where it does not render or function correctly with the full dataset. However, when I split the same dataset into smaller chunks (e.g., batches of 50 records), the chart loads and behaves as expected.

I’ve already enabled key performance-related configurations such as:

• enableVirtualization

• showChildOnDemand

• And a few other recommended settings

Despite these, the issue persists with the complete dataset. It seems like the chart may still be hitting some performance bottleneck or rendering limitation.

Could you please help look into this or suggest further optimizations?

Thanks!

[Ajithkumar Gopalakrishnan]

Hi Prabhat,

Greetings from Syncfusion Support,

Before proceeding, we kindly request you to share more information to help us identify the cause of the issue. We request you to share more information to achieve your requirement. Kindly share the details below.

• The full code snippet of the Gantt chart along with package version details.
• A video demo to replicate the issue, including replication steps.
• Share the details about your time zone for validation.
• Information about the dataSource, including its structure and a dummy dataSource similar to what is used in your application.
• Replicate the problem using our sample and share the relevant details.

Sample link: https://stackblitz.com/edit/angular-nvhdnivy-v7msez75?file=src%2Fapp.component.ts

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

[Prabhat Thakur]

Hi Ajithkumar,

Thank you for your response.

Please find the requested details below to help you identify the issue we’re facing with the Syncfusion Gantt Chart:

Time Zone

My local time zone is India Standard Time (IST), UTC +5:30.

Issue Description

When using the Gantt chart component with a larger dataset, I am experiencing an issue where the data does not render inside the chart if the processing time is below a certain threshold.

• Specifically, when the dataset is processed and ready within 500 milliseconds, the Gantt chart fails to display the data.

• However, when I introduce a delay (e.g., 1000ms or more) before assigning the data to the chart, it loads and displays correctly.

• This behavior becomes more problematic when handling large datasets, where asynchronous data loading is common. The same issue reappears intermittently, depending on the size and loading time of the data.

This suggests that the Gantt component might be attempting to render before the dataset is fully ready or before the component itself is initialized to handle it properly.

Expected Behavior

The Gantt chart should render the data correctly regardless of how fast or slow the data is processed, especially in real-time or fast-loading scenarios.

Goal

I would like to resolve this issue so that:

• The chart displays correctly even if data is assigned within <500ms.

• The component can handle large, rapidly loaded datasets reliably without requiring manual delays or workarounds like setTimeout.
  

Video Demo

Please find the screen recording of the issue here:
Video Link : https://www.loom.com/share/a597700a1a3043a1aff4d1b8fa1ca2ec

Attachment: ganttchart_cc243482.zip

[Sridharan Jayabalan]

Hi Prabhat,

Thanks for your patience.

We have analyzed your query and reviewed your code snippets. We prepared a sample using your shared data source and properties defined in the TypeScript file. We observed that your data source contains only 270 records. To further validate the performance, we prepared another sample with 26,000 records, which took around 21 to 24 seconds to load which is considered expected behavior.

The Gantt Chart performs various validations during data binding, including parent-child hierarchy checks, predecessor validations, holiday/weekend validations, and timeline cell rendering. In your case, the time delay is mainly due to the complex predecessor validations in your dataset.

We would also like to highlight that we are continuously working to enhance the performance of our Gantt Chart with every release. In our latest release, we have introduced several performance improvements, and we are continuing to optimize further to reduce the initial load time.

As a suggestion, please set the autoCalculateDateScheduling property to false. This can significantly reduce processing time during the initial load.

We have attached:

• A StackBlitz sample using your shared data source.
• A local sample with 26,000 records, where 2,500 records are initially loaded, and the remaining are added dynamically via a button click.
• A video demo showing the time metrics for these scenarios.

Stackblitz Sample - https://stackblitz.com/edit/angular-1ktxufeh-85zume2j?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fdata.ts

Local sample - sample.

Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/Performance

You can also check other possible ways to improve performance using below documentation link.

Performance tips for EJ2 Angular Gantt control | Syncfusion

 

Please check and let us know if you need any further assistance.

Regards,

Sridharan

[Prabhat Thakur]

Hi Sridharan,

Thank you for the detailed analysis and the sample implementation.

I reviewed your suggestions, and I understand that disabling autoCalculateDateScheduling can improve performance. However, in my use case, I need the Gantt chart to automatically recalculate task dates whenever there is a change in holidays, working weeks, or working hours. Therefore, disabling this property is not a viable option for us.

Could you please suggest any alternative optimizations or configurations—other than setting autoCalculateDateScheduling to false—that can help mitigate the rendering issue and ensure the chart works reliably even when the data is processed and assigned quickly

[Prabhat Thakur]

Hi Sridharan,
As per your recommendation, we have already disabled autoCalculateDateScheduling and enableCriticalPath during the initial load to optimize the performance. These properties are only enabled after the data load is complete using a delayed setTimeout.

However, we are still observing a noticeable delay and UI freezing when enabling these settings post-load. It seems that the performance bottleneck persists even when these features are toggled after the initial render.

Could you please advise if there are any other possible solutions or optimizations to improve the performance in this scenario? Specifically:

• Are there plans to allow async computation for predecessor validation and critical path rendering?

We would appreciate any additional insights or alternative approaches you can suggest.

Thanks again for your support and looking forward to your suggestions.

[Sridharan Jayabalan]

Prabhat,

 

To improve the initial rendering performance of the Gantt Chart, we recommend setting the following properties to false inside the load event:

 

• autoCalculateDateScheduling

• enableCriticalPath

• enablePredecessorValidation

 

Disabling these features during the initial load can significantly reduce rendering time. If the performance issue persists, it may be related to other aspects of your application's execution time.

 

Once the Gantt Chart is fully rendered, you can re-enable these features by setting the properties to true inside the created event.

 

Note: This approach helps optimize the initial load time. All validations and scheduling logic will start functioning after the Gantt is rendered.

 

Code-Snippet:   

ts:-

 

  load() {

    this.ganttObj.autoCalculateDateScheduling = false;

    this.ganttObj.enableCriticalPath = false;

    this.ganttObj.enablePredecessorValidation = false;

  }

  created() {

    this.ganttObj.autoCalculateDateScheduling = true;

    this.ganttObj.enableCriticalPath = true;

    this.ganttObj.enablePredecessorValidation = true;

  }

 

Sample - Bgipxrti (duplicated) - StackBlitz

 

You can also check other possible ways to improve performance using below documentation link.

Performance tips for EJ2 Angular Gantt control | Syncfusion

 

  

Regards,

Sridharan

[Prabhat Thakur]

Hi Sridharan,

Thank you for the suggestion.

I tried implementing the approach you recommended — disabling autoCalculateDateScheduling, enableCriticalPath, and enablePredecessorValidation in the load() method and re-enabling them in the created() event.

However, I encountered an issue when enabling enableCriticalPath — the application crashes upon setting this to true after the chart is rendered. I’ve double-checked the configuration, and the issue consistently reproduces.

Let me know if there’s a known limitation or any workaround you would suggest to safely enable enableCriticalPath post-render.

Best regards,
Prabhat

[Prabhat Thakur]

Hi Sridharan,

Thank you for the suggestion.

I tried implementing the approach you recommended — disabling autoCalculateDateScheduling, enableCriticalPath, and enablePredecessorValidation in the load() method and re-enabling them in the created() event.

However, I encountered an issue when enabling enableCriticalPath — the application crashes upon setting this to true after the chart is rendered. I’ve double-checked the configuration, and the issue consistently reproduces.

Screencast : https://www.loom.com/share/7d4aa85716ba480fb793affe455e08c1?sid=1ac1d9ae-b53d-4e19-b94d-59d904a456f0

Let me know if there’s a known limitation or any workaround you would suggest to safely enable enableCriticalPath post-render.

Best regards,
Prabhat

[Ajithkumar Gopalakrishnan]

Hi Prabhat,

We have prepared a sample on our end and confirmed the reported issue. When data is dynamically bound and the critical path is enabled using the toolbar, we observed a delay occurring after the critical tasks are recalculated.

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/critical

Sample link: https://stackblitz.com/edit/angular-xejrxp7o-bitn3kqa?file=src%2Fapp.component.html,src%2Fapp.component.ts

Based on the video you shared, we noticed that a spinner appears, and no other actions are possible during this delay. We observed a similar delay in our sample after the tasks were updated to critical, which is demonstrated in the attached video.

Please confirm whether the delay we’ve shown in our video matches the behavior you're experiencing on your end. If so, kindly share the following additional details for further validation:

• The minimum and maximum number of records being bound in your case. And share the Gantt chart package version details.
• Any additional operations happening during or after critical path activation.

Once we receive this information, we will investigate further and provide appropriate guidance or a solution.

Regards,
Ajithkumar G

[Prabhat Thakur]

Hi Ajithkumar,

Thank you for the detailed investigation and the demo sample.

The delay you’ve shown in your video does match the behavior I’m experiencing on my end. I have already shared the required dataset and code sample in my previous message. I’m reattaching the same ZIP file here again which contains the dataset and code I used for testing.

Additionally, I’ve reviewed your sample and video — it reflects the same performance bottleneck we’re facing when the critical path is enabled dynamically via the toolbar.

Please proceed with further analysis, and let me know if anything else is needed from my side.

Best regards,
Prabhat Thakur

Attachment: shared_84030182.zip

[Prabhat Thakur]

Hi Ajithkumar,

Thank you for the detailed investigation and the demo sample.

The delay you’ve shown in your video does match the behavior I’m experiencing on my end. I have already shared the required dataset and code sample in my previous message. I’m reattaching the same ZIP file here again which contains the dataset and code I used for testing.

Additionally, I’ve reviewed your sample and video — it reflects the same performance bottleneck we’re facing when the critical path is enabled dynamically via the toolbar.

Please proceed with further analysis, and let me know if anything else is needed from my side.

Best regards,
Prabhat Thakur

[Prabhat Thakur]

Hi Ajithkumar,

Thank you for the detailed investigation and the demo sample.

The delay you’ve shown in your video does match the behavior I’m experiencing on my end. I have already shared the required dataset and code sample in my previous message. I’m reattaching the same ZIP file here again which contains the dataset and code I used for testing.

Additionally, I’ve reviewed your sample and video — it reflects the same performance bottleneck we’re facing when the critical path is enabled dynamically via the toolbar.

Please proceed with further analysis, and let me know if anything else is needed from my side.

Best regards,
Prabhat Thakur

[Ajithkumar Gopalakrishnan]

Hi Prabhat,

We can replicate the problem our end from your shared details. We have logged this reported issue, ‘When the critical path is enabled dynamically with virtualization, a delay occurs in taskbar rendering’ as a bug. Our team is working on a fix, which we plan to include in the Volume 2 SP release at the end of July.

You can track the progress of the resolution by visiting the feedback link provided below:

Feedback link: https://www.syncfusion.com/feedback/68177/when-the-critical-path-is-enabled-dynamically-with-virtualization-a-delay-occurs

Disclaimer: Inclusion of this solution in the main release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,
Ajithkumar G

[Sridharan Jayabalan]

Prabhat,

We are glad to announce that our Essential Studio ® 2025 Volume 2 SP release v30.2.4 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/197303/essential-studio-2025-volume-2-service-pack-release-v30-2-4-is-available-for-download

The fix for the issue “When the critical path is enabled dynamically with virtualization, a delay occurs in taskbar rendering in Angular | Feedback Portal” has been rolled out in our Volume 2 SP Release (v30.2.4). The reported issue occurs due to recursive function the data which already been validated is passed again which cause an performance issue. So upgrade to our latest version to resolve the problem.

Sample - 23bjg8yd (duplicated) - StackBlitz

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Sridharan