Tooltips are duplicated after closing the modal with another scheduler


#1

Hello !

I’m on an Angular Project and I have a problem with tooltip when I close a modal with another scheduler. The two schedulers are two instances and they have tooltips.

The problem happen only if I open and close the modal with another scheduler. I think, there is a confusion when the scheduler of modal link the tooltips and in addition to add tooltips in the second scheduler, the new tooltip is add to the first scheduler.

capture%20bug%20scheduler

How I can manage my tooltips on 2 schedulers ?

Thank you in advance. Have a nice day !


#2

Hello @RemiH ,

Could you please provide some demo, that I will be able to run locally and reproduce the issue? As ti could be connected with the way you are using scheduler instances in angular app.

Kind regards,


#3

Hello @Siarhei,

I have tried to create a demo on stackblitz, but I didn’t succeed to use dhtmlx library. If, it’s necessary, how I can share a demo ?

However, I can show you how we implement the two schedulers.

We implement our instances of scheduler like below. The first is the main scheduler (Who as the double tooltip problem) and the second is the schudler of modal of modification.

get SchedulerInstancedateRanges() {
 this._ngZone.runOutsideAngular(() => {
  if (!this.schedulerInstancedateRanges) {
    this.schedulerInstancedateRanges= Scheduler.getSchedulerInstance();

    this.disableMarkNowTimer(this.schedulerInstancedateRanges);
  }

  this.schedulerInstancedateRanges.clearAll();
});
return this.schedulerInstancedateRanges;
}

get SchedulerInstancePreviewDateRanges() {
 this._ngZone.runOutsideAngular(() => {
  if (!this.schedulerInstancePreviewDateRanges) {
    this.schedulerInstancePreviewDateRanges= Scheduler.getSchedulerInstance();

    this.disableMarkNowTimer(this.schedulerInstancePreviewDateRanges);
  }

  this.schedulerInstancePreviewDateRanges.clearAll();
});
return this.schedulerInstancePreviewDateRanges;
}

private disableMarkNowTimer(scheduler: SchedulerStatic) {
  scheduler.attachEvent('onTemplatesReady', function () {
    clearInterval(this._mark_now_timer);
  });

}

And we initialize the two schedulers like this (exemple for the first):

 ngOnChanges(changes: SimpleChanges): void {
    if (!changes.gardes.firstChange) {
      this._initScheduler();
      this._addEvents(data);
    }
  }

  ngAfterViewInit(): void {
    this._initScheduler();
    this._addEvents(data);
  }


 private _initScheduler(): void {
        this.scheduler = this._agendaService.SchedulerInstancedateRanges;

        this._configurerScheduler();

        this.scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'week');
   }

The configuration of sheduler set the values of config, xy, templates and tooltips. For the latter, we do it like this:

 private _setTooltips() {
    this.scheduler.attachEvent('onMouseMove', (id, e) => {

      const tooltip = (this.scheduler as any).dhtmlXTooltip;

      // if we are over event
      if (id) {
        const eventObj = this.scheduler.getEvent(id);
        const text = this._contentTooltips(eventObj);
        tooltip.delay(tooltip.show, tooltip, [e, text]);
      }
    });
  }

Note that the extra tooltip doesn’t use the custom tootltip but the default one. The second scheduler in the modal of modification is initialized in the same way with other instance.

If you need more details, don’t hesitate. Thank you for your help.

Kind regards,


#4

Hello @RemiH ,

Sorry for the delay.

You can send an archive with a simplified demo in a forum PM:

Highly-likely this scenario will be fixed in a future version, in which we are suppose to add the destructor method(the similar to the gantt) to the scheduler component

Kind regards,


#5

Hello @Siarhei,

I come back to you with an archive with a simplified demo of the problem. Could you tell me if there are a problem of implementation or a problem with the version ?

Currently, I use the version 5.3.9. Will this problem be fixed in the next version?

Kind regards,

demoDhtmlx tooltip duplication problem.zip (24.8 KB)


#6

Hello @RemiH ,

Thank you for the demo! I reproduced the issue, and currently, there is no built-in way to fix it. As I mentioned above, highly likely it will be fixed with the next major release(mid-Feb).

As a temporary workaround, you can update the show function in source files, and manually hide the tooltip before displaying the next one, as follows:

So the issue should be fixed:
https://recordit.co/YPWN0oJoWh

Kind regards,


#7

Hello @Siarhei,

Thank you for your answer. I tried your solution, but doesn’t work for me. I tried to use hide function directly in the component of Scheduler too, as below.

image

Perhaps, is it a difference of version ? Currently, I use the version 5.3.9.

Kind regards,


#8

Hello @RemiH ,

It shouldn’t be connected with the version. I also tried the 5.3.9 and this workaround also fixed the issue.

Steps I did:

Downloaded your demo
Installed node modules, and pro version of the scheduler(from the local folder
Add the source file of the tooltip extension to the scheduler component:


Add changes to the sources file of the tooltip:

Run the yarn start command

(in addition, you also can delete the .angular folder before running the yarn start command)

Kind regards,


#9

Thank you. It works now.

Kind regards,