I have uploaded Gantt Files in static resources.
Imported in LWC code as follows
import GanttFiles from ‘@salesforce/resourceUrl/dhtmlx’;
loadScript(this, GanttFiles + ‘/dhtmlxgantt.js’),
loadStyle(this, GanttFiles + ‘/dhtmlxgantt.css’)
Receiving Error at this line
console.log(‘window.Gantt’, window.Gantt); //Undefined
const gantt = window.Gantt.getGanttInstance();
I have checked folder structure and combinations but not found
I am not receiving this error when using trial version file.
Hello Sonali,
It seems that you try to create a new Gantt instance. That feature is available only in the Enterprise and Ultimate versions:
https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html
If you have a different version, you can comment these strings as you use the same name for the Gantt instance. But you will need to manually reset the Gantt configuration and detach the events when you switch to another page.
Thank you for your quick reply @ramil!
I am using Version 7.0.10, Professional Edition .
I have this version running in production with same code but with Aura components
Now I am migrating these things to LWC so Wondering why it is creating problem in LWC?
you can comment these strings as you use the same name for the Gantt instance.
You mean something like this from documentation - dhtmlxGantt is a static object and the default instance of it continually exists on the page. You may access it via the global gantt object at any time.
But you will need to manually reset the Gantt configuration and detach the events when you switch to another page.
I am new to this library so haven’t understood this comment here!
Please share if you some code snippets for LWC.
Thank you so much!
Hello Sonali,
I have this version running in production with same code but with Aura components
Now I am migrating these things to LWC so Wondering why it is creating problem in LWC?
Probably, you tried the Trial version there. It has all Enterprise features including the feature for creating new Gantt instances on the page.
You mean something like this from documentation
Yes, you can comment these strings:
Receiving Error at this line
console.log(‘window.Gantt’, window.Gantt); //Undefined const gantt = window.Gantt.getGanttInstance();
So that it looks like this:
//console.log(‘window.Gantt’, window.Gantt); //Undefined //const gantt = window.Gantt.getGanttInstance();
But you will need to manually reset the Gantt configuration and detach the events when you switch to another page.
I am new to this library so haven’t understood this comment here!
Please share if you some code snippets for LWC.
To clear the data, you need to use the clearAll method:
https://docs.dhtmlx.com/gantt/api__gantt_clearall.html
To load the data, you need to use the parse or load` method:
https://docs.dhtmlx.com/gantt/api__gantt_parse.html
https://docs.dhtmlx.com/gantt/api__gantt_load.html
When you load the page with Gantt, you need to save the event IDs the following way:
const onTaskClick =
gantt.attachEvent('onTaskClick', (id) => {
gantt.message(`onTaskClick: Task ID: ${id}`);
return true;
}, '');
eventIDs.push(onTaskClick);
When you switch to another page, you need to manually detach events by using the IDs that you saved in an array:
eventIDs.forEach(event => gantt.detachEvent(event));
eventIDs = [];
That approach is mentioned here:
https://docs.dhtmlx.com/gantt/api__gantt_detachallevents.html
Apart from that, probably, you will need to do something else, but I didn’t test all possible scenarios with that approach.
Unfortunately, I don’t have the code for LWC, but I can show the approach in the following snippet:
http://snippet.dhtmlx.com/5/a39804820
When you click on the Recreate Gantt, Gantt will initialize, load tasks, and attach the events. If you destroy Gantt, the events will be detached.
I have commnetd following lines
//const gantt = window.gantt.getGanttInstance();
But here is the issue now in loading Gantt
HTML
<div id=“gantt_here” class=“thegantt” lwc:dom=“manual” style=‘width: 100%;’></div>
JS
gantt.init(“gantt_here”);
Thank you!
`
Hello Sonali,
Probably, Salesforce doesn’t allow Gantt to find the element by ID, so, you need to find the HTML element and use it in the gantt.init method.
Here is how it is done in the demo on GitHub:
Hi @ramil
I have switched to Enterprise version of DHTMLX and initial issue related to Gantt initialization is resolved now.