Peculiarities of Gantt Instance

This article highlights the main features of using Gantt Instance.

Let's consider the most common case - building an application with several pages/tabs/views.

The following approach can be applicable to the Angular-based (or React-based) apps and is available only in the Commercial, Enterprise or Ultimate version of dhtmlxGantt (and not available in the GPL or Individual editions):

when you open a page/tab/view with Gantt, you need to create a new Gantt instance;
when you switch to a different page/tab/view, you need to destroy the Gantt instance.

The alternative approach (that will work for all versions) is to manually reset everything by yourself.

Check the example that demonstrates how the approach can be implemented.
When you click the Recreate Gantt button, Gantt will initialize, load tasks, and attach the events. If you destroy Gantt, the events will be detached.

Here is the list of things that you need to keep in mind when using this way:

Custom events

When you load the page with Gantt you need to manually save the IDs of the events to an array before adding them:

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've saved to an array:

eventIDs.forEach(event => gantt.detachEvent(event));
eventIDs = [];

For more details, see the Detaching events section.

Data Processor

You need to manually destroy dataProcessor:

dp.destructor();

Please, be aware that you need to destroy only dataProcessor, not Gantt. Otherwise, you won't be able to use Gantt until you reload the page.

Tasks, links, resource data, markers, custom hotkeys

You can safely remove these data from the Gantt instance by using the clearAll() method.

Gantt configuration

There is no a built-in way to save it or reset the Gantt configuration to the default one. Most of the Gantt configuration is saved inside the gantt.config object.

CSS

If you've added custom CSS, you need to manually remove it if it causes problems.

Calendar settings

You need to manually remove them with the gantt.deleteCalendar() method.

Other cases

Apart from the points described above, you will probably need to implement some other options, but we have not tested all possible scenarios of this approach yet.