[Angular] Destructor doesn't work properly

Scheduler Javascript
#1

Hello,

I am working on an Angular project and I have upgraded to version 6.0.1 of DHTMLX. I want to implement the desctuctor in order to close properly a modal with a scheduler.

I implement my scheduler in ngOnInit function.

ngOnInit(): void {    
   this.scheduler = this.scheduler = Scheduler.getSchedulerInstance();
}

ngOnDestroy(): void {
    this.scheduler.destructor();
    this.scheduler = null;
}

But, in the destructor function, the following error occurs.

image
image1050×87 5.61 KB

Why this error occus at the destruction of the component, on which a scheduler is present ?

Perhaps, it’s necessary to implement and delete the dataProcesor. I think I don’t need DataProcessor. I use events like below with a attachEvent.

this.scheduler.attachEvent('onMouseMove', (id, e) => {
    const tooltip = (this.scheduler as any).dhtmlXTooltip;

    if (id) {
       const eventObj = this.scheduler.getEvent(id);
       const text = this._contentTooltips(eventObj);
       tooltip.delay(tooltip.show, tooltip, [e, text]);
     }
}, null);

In doubt, I have tried to add this in destructor, but it’s doesn’t working too.

this.attachedEvents.forEach((id: string) => {
    this.scheduler.detachEvent(id);
});

this.scheduler.DataProcessor = null;

If it’s necessary to implement DataProcessor, in the documentation following, there is a lack a definition for CalendarEventService. How we are supposed to use CalendarEventService ?

Thank you for your help.

Kind regards,

#2

Hello,
It is hard to suggest what might be wrong as I don’t see your code.
Please, send me a ready demo with all the necessary JavaScript and CSS files so that I can reproduce the issue locally.
You can use the following angular demo as a code reference:
https://files.dhtmlx.com/30d/4c974e05438b25a636dc529b19956735/angular13+gantt+scheduler_destructor.zip

If it’s necessary to implement DataProcessor, in the documentation following, there is a lack a definition for CalendarEventService. How we are supposed to use CalendarEventService ?

CalendarEventService is a class that can be used to provide the scheduler with events. There is an article of dhtmlxScheduler and Angular integration where you can find the possible way of its implementation:
https://dhtmlx.com/blog/angular-dhtmlxscheduler-tutorial/

#3

Destructor itself doesn’t seem to call the error,
I can create and destroy the instance of the Scheduler without an error:

var tempScheduler = Scheduler.getSchedulerInstance(); 
tempScheduler.destructor();

The error however will happen if you try to call setCurrentView or updateView of the scheduler that is already destroyed:

var tempScheduler = Scheduler.getSchedulerInstance(); 
tempScheduler.destructor();
tempScheduler.setCurrentView();
// script error:
// Uncaught Error: The scheduler is not initialized. 
//  **scheduler.updateView** or **scheduler.setCurrentView** can be called only after **scheduler.init**

I’m not sure whether the stack trace starts from a some place in your code or from some handler in dhtmlxscheduler.js.
Is there any text below the last line at dhtmlxscheduler.js:35:319922 ?

If the stack trace starts from dhtmlxscheduler.js, the error may be caused by one of the activated plugins (and this would mean a bug we could fix quickly).
We only need to know what plugin and what settings to test.

You can either disable plugins one by one until you find one that causes the problem or do a quick debug session:

In order to check it, can you please

  1. set chrome tools to pause on all exceptions (https://umaar.com/dev-tips/32-pause-on-exception/)
  2. when the code stops at scheduler error, go up the stack trace https://developer.chrome.com/docs/devtools/javascript/reference/#call-stack and check what calls the scheduler.updateView
    you may need to re-format the code file using this button of chrome tools https://prnt.sc/x6xg-X_QxxqV

Once you find the place, you can post the screenshot of the related code and we’ll try to figure out the rest