Quick Info / Tooltip Extension

Gantt
#7

Hi @guldmi,

Seem to be exactly what I wanted. Thanks for that.

#8

Hi @guldmi,

Can I also check if it is possible to display QuickInfo box on the Grid when show_chart = false.
Currently, QuickInfo box is only show when selected and Chart is shown. I would like to display QuickInfo box when the row is selected and Chart is hidden.

Also, is there a API to call to hide the Tooltip? Such as gantt.getToolTip().hide(), something like that.
Reason being is that sometimes it doesn’t seem to capture the mouse has left the focus, and the tooltip does not hide after the timeout period. Especially if I move my mouse pretty fast to other area, which kind of cause the Tooltip to hang at that position and it will never hide after the timeout.
If you see my screenshot @ Weird bug with Gantt 6.1.3/4, sometimes I click the Add button and the component changes, but the Tooltip will still be shown in the middle of my new component and block the view, and it will never be able to get it hidden. Hope I put my point across, and not too confusing.

Thanks.

#9

Hi @Joseph!
Hello,
There is no built-in Gantt chart feature to show quickinfo in the grid.
but you can do it like in this snippet:
http://snippet.dhtmlx.com/74dc8914a

Alternatively, you can use gantt.ext.tooltips.attach() method to make the tooltip position independent of the position of the cursor.
Here is the sample, where you can see how it can be implemented for the tasks:
http://snippet.dhtmlx.com/7b00c0235

#10

Hi @guldmi,

Thanks for the sample, it should be able to do what I want. Will try it out soon.

I have another issue using quickinfo.

It seem like gantt.$click event is not registered after a component change.

Please see this example in Codesandbox.

  1. Click on any of the task, the quick info box will appear.
  2. Click on the Start button, the gantt message box will appear
  3. Click cancel to close the message box
  4. Click on the About link on top of the page
  5. Click on the Home link on top of the page to return back to the Gantt page
  6. Repeat Step 1
  7. Click on the Start button, nothing will happen.

If I refresh the page, then it will work again until I change to another component and back to Gantt again.

Any idea what is going on?

Thanks.

#11

Hi @Joseph!

It appears to be a bug on our end, thank you for reporting it.

Event handlers for quick info buttons are removed when gantt.init is called for the second time, and attached again only when a new DOM element for a quick info popup is created.

I’ve submitted it to our internal tracker, and the dev team has started fixing it and it will be published with the next bugfix release.

If you have any subscription to the Gantt Chart, you can contact the technical support and get the build with the fixed bug or I can PM you a download link you have a gpl version.

As a workaround for the issue, you can clear the internal quick info element before calling gantt.init. it will force reinitialization of the event listeners and will solve the issue:

gantt._quick_info_box = null;
gantt.init(...);

Or you can do it from onGanttReady event:

gantt.attachEvent("onGanttReady", function(){
     gantt._quick_info_box = null;
});

In this case, you’ll want to be sure that onGanttReady is attached only once per gantt instance (i.e. it’s not attached each time you display gantt), since otherwise more and more listeners will be attached which will cause a memory leak.
Here is a snippet of how it can be done:
https://snippet.dhtmlx.com/c72e28510

#12

Hi @guldmi,

Thank you for the acknowledgement.

I can help to perform a test prior to your next release with the GPL version. But as I have described in Weird bug with Gantt 6.1.3/4 with regards to the issue of running (local) using pre-release version. Not sure if it is because I did the it wrong way or otherwise. Appreciate if there is a better instruction for me to do so.

As a temporary measure, I will try out setting _quick_info_box to null first. I guess this would be easier than doing on onGanttReady event.

Lastly, is there any ETA for your upcoming release with the bugfix?

Thank you.

#13

Hi @guldmi,

I just re-visited this, and have some issue with the sample provided. I have made my own snippet.

  1. If I set show_chart = false, and click on the grid row, the following error will occur.

image
image1903×592 80.4 KB

Not exactly sure what it meant, but hope it helps you. Note that the TypeError only display in Chrome. When I tried to do the same in Microsoft Edge, it just simply throw Invalid Argument error message.

  1. If I remove setTimeout(), and show_chart = true, when I click on the left grid row, the quick_info_box will show up on the left grid. However, if I remove the setTimeout(), quick_info_box will always display on the chart as far as I have tested, and can tell. Any idea?

  2. I also noticed that the behavior for displaying quick_info_box with show_chart = true config, is that when the task is selected, it will sometimes display on the left grid, and sometimes on the chart. Although it will not exactly affect what I want to achieve, but I thought that there may be some issue with this behavior?

I would like to achieve that in the event show_chart = false, to display quick_info_box when task is selected. And when show_chart = true, to display quick_info_box as per its default behavior (meaning under/above the progress bar).

I guess this is straight forward by doing something like the following…

gantt.attachEvent("onTaskSelected", function(id){
  if (!gantt.config.show_chart) {
    var quick_info = document.getElementsByClassName("gantt_cal_quick_info")[0]
    gantt.$grid.appendChild(quick_info)
    quick_info.style.left = '0px';
  }
});

Thank you once again.

#14

Hi @Joseph!
The bugfix will be out around 13-14th of May

#15

Regarding the issue with quick info and show_chart = true - we’ve confirmed it as a bug. Quick info should be displayed over the grid if the timeline is hidden.
It will be fixed in upcoming v6.1.6 which is planned on 13-14th of May

#16

Hi @guldmi and @Aliaksandr,

Thank you to both of you.

#17

Hi, I have tested with gantt_6.1.6-pre2_gpl and it would seem that both bugs mentioned are resolved.

Thanks for the fix.

#18

As for the other issue that I have mentioned

It seem that it will be invalid as the current behavior for the QuickInfo when minimized will display on the grid, and when maximized will display on the chart. So please ignore that issue.

Thanks.

#19

Hi,

Sorry, would like to re-visit this.

Is it possible to have the option in QuickInfo to have something like gantt.quickinfo.show = grid and gantt.quickinfo.show = chart configuration? So that when gantt.config.show_chart = true, I can still force quickinfo to display on the grid.

Thanks.

#20

Hi @Joseph,

sorry for a big delay.

Yes, it makes sense. I think we can add an option for this.
I’m not sure about the global config (gantt.config.quick_info_…) since it’s already quite bloated as is.
We can probably move a quick info to a separate module, like:

gantt.ext.quickInfo:
- show(id: TaskID)
- show(x: number, y: number)
- hide():
- getNode()
- setContainer(container: string|HTMLElement)

That’s the initial thought, anyway. I’ve added a task to our tracker for research, maybe the final result will differ.
Right now I can’t give you a quick solution since right now other things are in active work and this feature goes to the backlog. I can’t promise any updates earlier than mid June

#21

Hi @Aliaksandr,

That’s alright.

The API is up to you guys to decide what’s best for us to use it. So I’ll leave it to you for that.

I still like the idea to not just specify x, y but to define it to show on grid and on chart.
Maybe could also explore the idea of allowing to define the width or dimension of the quickinfo box.

I’ll love to try out the features once you have a pre-release to see how things are once you are ready.

Thanks!

#22

Hi @guldmi,

Following your previous example of displaying quickinfo on the grid when show_chart = true will encounter some alignment issue.

As usual, please refer to my Github for demo.

By default, when it is started, only the grid will be shown.
Click on any task in the grid, will display the quickinfo alignment correctly.
Now, click Show to show the chart.
Click on the any task and you will see that the quickinfo alignment is off.

This only happens if using this to display the quickinfo (in GanttHook.js - useQuickInfo())

if (gantt.config.show_chart) {
        const quickInfo = document.getElementsByClassName("gantt_cal_quick_info")[0];
        if (quickInfo) {
          gantt.$grid.appendChild(quickInfo);
          quickInfo.style.left = '0px';
        }
      }

If you were to remove useQuickInfo() in GanttChart.js, and revert back to the original behavior of quickinfo, then there wouldn’t be any alignment issue.

Any idea what is causing that?

Thanks.

#23

Hi @Joseph!

I’ve tried to reproduce your issue and fix it:
http://recordit.co/r0RwiXmWPE

In case timeline is not shown Quickinfo popup is created as a child of the <div class="gantt_grid_data"> element.
But when the timeline is shown Quickinfo is created as a child of the <div class="gantt_grid">.
So you need to change this line in GanttHook.js:

gantt.$grid.appendChild(quickInfo);

to this:

gantt.$grid_data.appendChild(quickInfo);
#24

Hi @guldmi,

Thank you, I will try it out on my end and update on the result later on.

#25

Hi,

Do update this thread if there is any news to this.

Thank you.

#26

Hello Joseph,
That functionality has not been implemented yet. I will notify you when it is implemented.