how can I use dhtmlx gannt in vue or angular or react?

[Hsensor]

The dhtmlx gantt plug-in is used in Vue. When you navigate to the page again, the arrow callback function of the previous attachEvent will be executed, resulting in an error. Because the previous vue instance has been destroyed, the previous $ref.xxx attribute does not exist. gantt.attachEvent('onAfterTaskDrag', () => { this.$refs.markerLine.getLines(); }); Therefore, how can I use dhtmlx gannt in vue, or angular or react?

I can only destroy the events in the page with detachEvent. Do I bind them again?

[AntoRin]

You need to detach events during your component destroy, and re-attach them again during component init.

gantt.detachAllEvents();

This should clear all of your events. Except if you are using inline editors, when you'll have to use the following as well:

gantt.ext.inlineEditors.detachAllEvents();

[Hsensor]

You need to detach events during your component destroy, and re-attach them again during component init.

gantt.detachAllEvents();

This should clear all of your events. Except if you are using inline editors, when you'll have to use the following as well:

gantt.ext.inlineEditors.detachAllEvents(); If gannt.detachAllEvent is used, the link connection will not follow the drag of the task.

[AntoRin]

You need to detach events during your component destroy, and re-attach them again during component init. gantt.detachAllEvents(); This should clear all of your events. Except if you are using inline editors, when you'll have to use the following as well: gantt.ext.inlineEditors.detachAllEvents(); If gannt.detachAllEvent is used, the link connection will not follow the drag of the task.

Is it not the case that you are only going to detach all events when user is navigating away from the page? So as to prevent your previous event listeners holding references to properties from a destroyed component?

If that is the case, when user navigates back to the page, you must re-attach all event listeners. Your links should work without problem.

[Hsensor]

You need to detach events during your component destroy, and re-attach them again during component init. gantt.detachAllEvents(); This should clear all of your events. Except if you are using inline editors, when you'll have to use the following as well: gantt.ext.inlineEditors.detachAllEvents(); If gannt.detachAllEvent is used, the link connection will not follow the drag of the task.

Is it not the case that you are only going to detach all events when user is navigating away from the page? So as to prevent your previous event listeners holding references to properties from a destroyed component?

If that is the case, when user navigates back to the page, you must re-attach all event listeners. Your links should work without problem.

Use gantt. dealAllEvents() in the beforeDestory lifecycle hook of vue2 When you enter the page again and drag the task, the connection does not work. It seems that detachAllEvents released link monitoring

[Hsensor]

beforeDestroy() { gantt.clearAll(); ganttHandlers.forEach(item => { gantt.detachEvent(item); }); }, mounted() { let ganntFn = gantt.attachEvent('onBeforeRowDragEnd', () => { console.log('onBeforeRowDragEnd============'); return false; }); ganttHandlers.push(ganntFn); } I have to do this. Link can work

[Hsensor]

[gearcoded]

@Hsensor, If you use Gantt in Vue, it is expected to use the Gantt Instance approach.

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: https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html#destructorofganttanddataprocessorinstances

Alternatively, you need to manually reset everything by yourself. The following article covers the known issues: https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html

Detaching all events with the detachAllEvents method is not recommended, as it also detaches internal events. And there is no guarantee that it will work as expected when you load Gantt. The expected approach would be to save event IDs in an array and manually detach them later: https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html#customevents Here is an example:

const onTaskClick = gantt.attachEvent('onTaskClick', (id) => {
    gantt.message(`onTaskClick: Task ID: ${id}`);
    return true;
}, '');
eventIDs.push(onTaskClick);

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

Here are the demos:

Gantt Instance approach: https://files.dhtmlx.com/30d/4f25d33cbc4b19057f40a028577f9410/vue3+gantt-instance+trial_7.1.12.zip

Alternative approach: https://files.dhtmlx.com/30d/ba3be5b2fbffd3484af6c2da06ba653e/vue3+gantt.zip