How to detach gantt.ext.inlineEditors events?

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

1 Like

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.png

It 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!!