Skip to content

在vue中使用dhtmlx-gantt,遇到的问题 #106

Closed
@houqingbin

Description

@houqingbin

在vue2中使用dhtmlx-gantt,配置了gantt.plugins({
tooltip: true
});,有时候鼠标离开后还会有tips窗口
image
如果使用destroyed生命周期,并gantt.destructor(),会在下次进入调用gantt组件页面时,会抛出TypeError: Cannot read properties of undefined (reading 'tasksStore')
at t._update_flags错误

image

Activity

gearcoded

gearcoded commented on Jan 16, 2024

@gearcoded

@houqingbin,
If you use the Gantt instance approach, Gantt should hide the tooltip:
https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html#destructorofganttanddataprocessorinstances

In the past, Gantt didn't hide the tooltip, but starting from the 6.1.4 version, it is removed when you call the destructor method:
https://docs.dhtmlx.com/gantt/whatsnew.html#:~:text=Fix%20incorrect%20behavior%20of%20the%20Tooltip%20extension%20when%20gantt.destructor%20is%20called

If your license doesn't allow you to use the Gantt Instance approach, it means that you cannot use the destructor method and need to manually handle all that is left from Gantt after you open a different tab:
https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html

You can use the following code to manually hide all the tooltips:

const tooltips = document.querySelectorAll(".gantt_tooltip");
tooltips.forEach(function(el){
  el.remove()
})
lfk0719

lfk0719 commented on Jan 24, 2024

@lfk0719

怎么样老哥解决了吗

DaTongDXM

DaTongDXM commented on Feb 23, 2024

@DaTongDXM

我也遇到了,使用destructor再打开会直接挂掉

gearcoded

gearcoded commented on Mar 5, 2024

@gearcoded

@DaTongDXM,
if you use the destructor method in the GPL or Individual versions, this is expected behavior. You need to reload the page to start using Gantt again.
So, with these versions, you shouldn't use the destructor method. Instead, you need to manually detach all event handlers and remove the loaded data. This approach is described here:
https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html

If you use another Pro version, you should be able to create a new Gantt Instance when you open a page/tab/view with Gantt:
https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html

Here are the demos:

Vue 3 + Gantt Instance Alternative:
https://files.dhtmlx.com/30d/c0a7cdde5ff4139e785733d9bfdbc9fb/vue3+gantt-gpl.zip

Vue 3 + Gantt Instance:
https://files.dhtmlx.com/30d/e8f8df5f93c8fd480d9056eba19e9be5/vue3+GanttInstance+8.0.1_trial.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @DaTongDXM@gearcoded@lfk0719@houqingbin

        Issue actions

          在vue中使用dhtmlx-gantt,遇到的问题 · Issue #106 · DHTMLX/gantt