Cannot read properties of undefined (reading 'classList') on Gantt refresh

[Niels Van Goethem]

Dear, 

When I call refresh on the gantt component, I have 2 issues:

My custom button in the toolbar looses its content, and I get this error in the console:

I put the code in a stackblitz, because I fear it is too long to post here
https://stackblitz.com/edit/angular-9t1azq-xetf2k?file=src%2Fplanning.service.ts

[Ajithkumar Gopalakrishnan]

Hi Niels,

Greetings from Syncfusion Support,

We can replicate the problem our end. We have logged this reported issue, ‘A script error is thrown when dynamically changing the gridline property' as a bug. We are working on a fix for this issue and plan to include it in our upcoming patch release which is scheduled to be rolled out on Nov 19, 2024. You can track its status from the feedback link given below. 

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

Feedback link: https://www.syncfusion.com/feedback/62668/a-script-error-is-thrown-when-dynamically-changing-the-gridline-property

Note: The feedback link is currently in review and will be accessible once validated. Additionally, we encountered an issue where a script error is thrown when changing the gridline property dynamically on an empty Gantt chart (i.e., without data). Please let us know if you are experiencing a similar issue. If the issue occurs with data as well, kindly share more details and a working sample for validation.

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

Regards,

Ajithkumar G

[Niels Van Goethem]

Hello  Ajithkumar, the problem I'm experiencing is not the one you are describing. The content of my custom toolbar button disappears when I refresh the gantt. I tried recreating my problem here:

Evjj8j (forked) - StackBlitz

But I get the error this error 

[Lokesh Arjunan]

Hi Niels,

We are currently unable to reproduce the reported issue of losing the custom toolbar element when the Gantt component is refreshed. In the attached sample, we have included two custom buttons: one for dynamically changing gridlines to refresh the Gantt, and the other is a custom button. When the refresh button is clicked, a console error occurs as previously mentioned. However, the custom toolbar element is rendered instead of disappearing.

Could you please replicate the issue in the attached sample or, if possible, share a sample that can reproduce the issue? The previously attached sample is not runnable.

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

Best regards,

Lokesh

[Niels Van Goethem]

Hi! I have been able to reproduce my issue

https://stackblitz.com/edit/angular-e5syge-pw9gk9?file=src%2Fapp.component.ts

[Sridharan Jayabalan]

Niels,

Thanks for providing the sample to replicate the issue. We've confirmed that the issue on our end is due to a script error occurring when the refresh method is called. Resolving this script error will also address the custom toolbar button disappearing issue. We are working on a fix, and both issues are expected to be resolved by November 19, 2024. We appreciate your patience in the meantime.

Please feel free to reach out if you have further questions.

Regards,

Sridharan

[Sridharan Jayabalan]

Niels,

Thanks for your patience.

Issue 1: A script error is thrown when dynamically changing the gridline property

Issue 2: custom toolbar button disappearing issue

We are glad to announce that our patch release (v27.2.3) is rolled out successfully. In this release, we have added the fix for the reported issue.

 

Please upgrade to the latest version packages to resolve this issue "A script error is thrown when dynamically changing the gridline property in Angular | Feedback Portal".

 

Root Cause - In our method, chartRowsTD[0].classList.contains(className) checks if the first cell contains a specific class. However, if the data source is null or empty, chartRowsTD[0] is undefined, leading to an error.

Release Notes - Essential Studio for EJ2 TypeScript Weekly Release Release Notes

Sample - 94xshs (forked) - StackBlitz (Issue 1) & K1rbqp (forked) - StackBlitz (Issue 2) (no need to call refresh method)

 

Regards,

Sridharan

[Niels Van Goethem]

Hi, I have upgraded all syncfusion packages, but the button is still not displaying properly. 

I wanted to try your sample regarding the button issue, but it seems to 

[Udhayakumar Anand]

Niels

We have reviewed your query, and as previously suggested, it is no longer necessary to refresh the Gantt chart to reflect the changes. By removing the refresh method, the issue can be resolved.

Code Snippet:

/*app.component.ts*/

public onGridLineChange(args: any) {

    console.log(args);

    const type = args.item.text;

    this.lines = type;

// this.ganttObj.refresh(); //no need to refresh

  }

You can find the modified sample link below for your reference. If explicit refresh is still required, please provide the reason, so we can explore alternative approaches to meet your requirements effectively.

Sample Link: K1rbqp (forked) - StackBlitz

Regards,

Udhayakumar

[Niels Van Goethem]

I am not refreshing the gannt object , and the problem still persists. I have not yet been able to reproduce the issue myself in the stackblitz

[Sridharan Jayabalan]

Niels,

For your reported issue, we suspect that your application might be running with cached files. To resolve this, please try the following steps:

1. Delete the package-lock.json file and the node_modules folder from your application.

2. Reinstall the node_modules with the updated versions using npm install.

If the issue persists, we recommend replicating the problem with a local sample and sharing it with us. This will greatly help us in further validation and providing a resolution.

Regards,

Sridharan

[Niels Van Goethem]

I still had service that was calling refresh, my apologies

[Kalpana Ganesan]

Hi Niels,

No need to worry! It appears you were handling a service that continuously invoked a refresh function. Should you require any assistance, please don't hesitate to reach out!

Regards,

Kalpana.