How can I detach ext events?
When I tried to detach with gantt.detachEvent I get an “Can’t resolved property from “undefined””
Thanks in advance!
How can I detach ext events?
When I tried to detach with gantt.detachEvent I get an “Can’t resolved property from “undefined””
Thanks in advance!
Hello,
To detach an event handler, you need to specify its ID. To get the ID of the event handler, you can save it to a variable.
Here is an example:
http://snippet.dhtmlx.com/5/c25a118eb
Thanks ramil! Works cool!!
Sorry ramil
I’ve tried, but the detaching works just once and then “TypeError: Cannot read property ‘removeEvent’ of undefined”
https://puu.sh/Ce6WB/df74723b37.pngIt happens every time that I unmount the gantt component changing pages.
The code is the next
componentWillUnmount() {
this.events.forEach(element => {
gantt.detachEvent(element)
});
this.extEvents.forEach(elm => {
gantt.ext.inlineEditors.detachEvent(elm)
})
gantt.ganttEventsInitialized = false
gantt.clearAll()
}
const onEditStart = gantt.ext.inlineEditors.attachEvent("onEditStart", (state) => {
//Some Code
})
this.extEvents.push(onEditStart)
const onBeforeSave = gantt.ext.inlineEditors.attachEvent("onBeforeSave", (state) => {
//Some Code
return true
})
this.extEvents.push(onBeforeSave)
Hello,
I think you can try using Gantt destructor:
https://docs.dhtmlx.com/gantt/api__gantt_destructor.html
It detaches all events and clears all data. If you don’t have the Enterprise Pro version, Gantt won’t work until you refresh the page, but I suppose, this is what happens in your case.
If that doesn’t help you, could you clarify why do you need to detach inline editors? The events are not fired outside Gantt as there are no inline editors outside Gantt.
Hi ramil,
I tried to use the Gantt destructor without success:
componentWillUnmount() {
/* this.events.forEach(element => {
gantt.detachEvent(element)
});
this.extEvents.forEach(elm => {
gantt.ext.inlineEditors.detachEvent(elm)
})
gantt.ganttEventsInitialized = false
gantt.clearAll() */
var myGantt = Gantt.getInstance();
//destroying a gantt instance
myGantt.destructor();
}
We are using the pro edition, so I can’t understand why I’m getting this error
TypeError: Gantt.getGanttInstance is not a function
Thanks in advance!
Hello,
Gantt
and Gantt.getInstance();
commands are available only for the enterprise Pro version. But you don’t need that to use the destructor. Here is the command to destroy Gantt:
gantt.destructor()
If you have the enterprise Pro version, here is the demo where you can see 2 Gantts:
https://files.dhtmlx.com/30d/4179779c1c3222973f4760fc038c327b/react+multiple-gantts.zip
Don’t forget that after installing the modules, you need to install the enterprise version:
https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html#addingprofessionaleditionintoproject
Hi ramil
The “gantt.destructor()” approach doesn’t work, but I think that I found why it fails.
Actually, the gantt componen fails when I tried to detach the “ext” events a second time. The example is in the next video: https://puu.sh/Cjyp2/834947ce13.mp4
As you can see, the second time it associates an ev_xxxx with a 1 index; check the console at the video.
Tell me if you need more info.
Hello,
Thank you for the clarification.
Have you tried using only gantt.destructor()
without other things?
When you apply that command it removes all data, detaches all events and config.
Hi ramil,
Yes, I tried to use gantt.destructor(), but when that function is executed once I’m not able to use the gantt component anymore, I have to refresh the page to be able to use Gantt again.
Hello,
Thank you for the clarification.
Could you clarify why do you need to detach the event handlers at all? Does it affect the performance or there is something else?
As I can see from the error message, you have a flag that shows whether events have been attached:
If so, you can attach events only if they hasn’t been attached before:
if(!gantt.ganttEventsInitialized){
gantt.ganttEventsInitialized = true;
gantt.ext.inlineEditors.attachEvent("onEditStart", (state) => {
//Some Code
})
gantt.ext.inlineEditors.attachEvent("onBeforeSave", (state) => {
//Some Code
return true
})
}
So you won’t have duplicated event handlers after multiple mounts.
The reason behind to detach the events of the gantt is because every time when change the view to another page of our app, the gantt events won’t work anymore.
For example, we have set the “OnBeforeTaskUpdate” event to update our redux store. The first time that the gantt is mounted it works fine, but if we dont detach gantt events, the second time that the component is mounted the “OnBeforTaskUpdate” doesn’t work anymore, even if we redo the attachment of the events.
So, we realized that every time that the React container that contains the gantt component is unmounted, is necesary to detach the events to work fine the next time.
Hello,
Thank you for the clarification.
I was able to partially reproduce the issue in the snippet:
https://snippet.dhtmlx.com/a77319bfb
You can try attaching the event handler after Gantt reinitialization:
http://snippet.dhtmlx.com/c26d98f8b
If that doesn’t help you, please send me a demo project where I can reproduce the issue, and I will try to find a workaround. Also, the dev team will have more information to see the issue and test the fixes (as regular pages work in a different way).
Hi ramil!
I tested your solution and it works until now.
I will keep you updated if I have any issue
Thanks for all!!