gantt.clearAll() Problem

Gantt
#1

I’m using dhtmlx gantt on vue.js.
When I move the screen and access the screen with gantt again, gantt_overlay_area, gantt_marker_area remains undeleted. called gantt.clearAll() from destroyed, but there is no change.
Of course, I called gantt.clearAll() from the destroyed life cycle, but there was no change.

#2

Hello Sam Shin,
we sent the answer to your email, please, check it. I would suggest continuing the discussion there. Thank you for understanding.

#3

Hello,
I duplicate the solution from our correspondence here so that everybody could see it.
The simplest solution would be to completely destroy the Gantt instance when you hide it and create a clean instance when you show the Gantt again.
We don’t have a ready example in vue.js, but you can check this article for the reference:

Multiple Charts on a Page Gantt Docs - please check the ‘Angular’ example, it will be very similar to what you need.

You create a new Gantt instance using Gantt.getGanttInstance in mounted hook, and destroy it using gantt.destructor

mounted: function () {
  gantt = Gantt.getGanttInstance();

  gantt.init(this.$refs.gantt);
  gantt.parse(this.$props.tasks);
}

destroyed() {
  gantt.destructor();
  gantt = null;
}

https://docs.dhtmlx.com/gantt/api__gantt_destructor.html

That way all elements and event handlers of Gantt will be cleared when the component is removed, and you’ll create a new Gantt object when needed.
Please, note that destructors are available only for enterprise / ultimate versions.