Hi @guldmi,
Thank you, I will try it out on my end and update on the result later on.
Hi,
Do update this thread if there is any news to this.
Thank you.
Hello Joseph,
That functionality has not been implemented yet. I will notify you when it is implemented.
Hi,
Is there any way to show the quick_info
when it is a unscheduled_task
?
An example in this snippet.
I would like to display it on the grid like the first 3 task, but if it’s unscheduled task, nothing will be shown on the chart, which then I believe, cannot grab this.
var quick_info = document.getElementsByClassName("gantt_cal_quick_info")[0]
Any other way to do so? So that I can display the quick_info
on the Grid?
Thanks.
Hi Joseph,
It appears to be a bug on our end, thank you for noticing it. I’ve forwarded this issue to our dev team. It will be fixed in the next bugfix release, either tomorrow or early next week.
Hi,
Is there a way to detect if the user click is on the expand/collapse
icon?
See this snippet.
Try to click on the >
to expand or collapse the tree. Notice that the QuickInfo
will be shown when it is clicked. However, with that, it is ‘blocking’ the view (in a way) of the child task.
So what I would like to have is that if the click is on the ‘icon’ then Quickinfo
should not appear. Otherwise, it should appear as it should be.
Hope I made myself clear.
Hi Joseph,
Yes, you can do this, by using our built-in events (“onTaskOpened/onTaskClosed”).
API:
https://docs.dhtmlx.com/gantt/api__gantt_ontaskopened_event.html
https://docs.dhtmlx.com/gantt/api__gantt_ontaskclosed_event.html
When these evets fires you can hide quickinho using gantt.hideQuickInfo() method
API: https://docs.dhtmlx.com/gantt/api__gantt_hidequickinfo.html
gantt.attachEvent("onTaskOpened", function(id){
setTimeout(function(){
gantt.hideQuickInfo();
}, 1);
return true;
})
gantt.attachEvent("onTaskClosed", function(id){
setTimeout(function(){
gantt.hideQuickInfo();
}, 1);
return true;
})
You can see how it could be done in the following snippet: http://snippet.dhtmlx.com/ec28b964e
Also, I don’t think you need onTaskSelected handler anymore. If I understand correctly, it was needed as a workaround for the previous versions of the gantt, to display the Quick Info popup when the timeline (chart) is hidden. Now it should work out of the box and you shouldn’t need to attach the tooltip element manually
Hi @Siarhei,
Thanks, it seem to work as intended at the moment.
What do you mean by that?
Are you talking about this portion?
gantt.ext.tooltips.attach()
If that is so, then I am not using this anymore.
Would also like to understand why does it need to have a timeout of 1 before hiding? I tested without timeout and it will always show the quickinfo
.
gantt.attachEvent("onTaskOpened", function(id){
//setTimeout(function(){
gantt.hideQuickInfo();
//}, 1);
return true;
})
Hi Joseph,
Sorry, I’ve misspoken. I meant the quick info element, not the tooltip element.
I was referring to this code from your previous snippet:
gantt.attachEvent("onTaskSelected", function(id){ setTimeout(function(){ var no_chart = false; if (!gantt.config.show_chart) { gantt.config.show_chart = true; no_chart = true; } var quick_info = document.getElementsByClassName("gantt_cal_quick_info")[0] gantt.$grid.appendChild(quick_info) quick_info.style.left = '0px'; if (no_chart) gantt.config.show_chart = false; }) });
As far as I understand, it was a workaround needed to make quick info work when the chart is hidden. If it’s so - I believe it’s no longer needed. If you use the latest gantt, you can simply remove this code and everything should continue working.
About hideQuickInfo
inside the setTimeout
- it works so, because when you click the expand/collapse button of the task it also invokes the showQuickInfo
from a timeout: https://github.com/DHTMLX/gantt/blob/6.2.6/codebase/sources/ext/dhtmlxgantt_quick_info.js#L123
As a result, the quick info is not yet displayed when onTaskOpened/onTaskClosed
is fired and you can’t cancel the quick info timeout. So as a workaround, we set another timeout which will fire after the quick info and hide the popup from there.
Hi @Siarhei,
Yes, removing it works when Chart
is hidden. But I also need it to display on the Grid
when the Chart
is in expanded mode. Hence, removing it will not allow me to always display the QuickInfo
on the Grid
. Unless you have some API that allows me to set gantt.config.quickinfo = grid
or similar where I can define where the QuickInfo
is always shown at, otherwise, I think I still require that portion of the code.
I can’t recall what event
I am tapping on at the moment, but the current code looks like this
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';
}
So that whenever it is clicked, even on the bar in the Chart
, QuickInfo
will always be displayed on the Grid
.
Let me know if there is a better way to do this.
I see, thanks for the explanation.
Hello, is there a way to hide the tooltip for the columns on the left, and leave it just for the task lines?
I have a question, my gantt chart is in a container, so when i import the tooltip it displays outside the container, and by that it is miles away from the content that is being hovered over. Is there a way to make this work inside the container?
Here’s an image showing the bug: https://imgur.com/a/sdtlyYC
Hi @Feel_the_Beats,
I reproduced the issue but still not sure that it is your situation.
Steps that I did to reproduce:
I create a simple template with a tooltip extension. (like in the attached snippet)
Put the gantt container inside another container(div.outer).
Add margin-top and padding-top attributes to the gantt container.
Hover the mouse over the task.
The tooltip position is wrong.
Snippet with reproduced issue(check HTML tab): https://snippet.dhtmlx.com/5a2509f7c
Is it the same issue that you have?
It appears to be a bug on our end, thank you for noticing it. I’ve forwarded this issue to our dev team and will inform you when this issue will be fixed.
To avoid this problem, I could advise you to use a padding-top attribute instead of a margin. Like in the following snippet:
http://snippet.dhtmlx.com/082d8554a
If you’re having a different issue, could you reproduce it in the following snippet:
https://snippet.dhtmlx.com/5a2509f7c , click the share button and send me the link?
Hi @Feel_the_Beats,
The dev team has fixed the bug with the incorrect tooltip position in the version 6.3.3
:
https://docs.dhtmlx.com/gantt/whatsnew.html#633
Now the margin-top and padding-top attributes added to the gantt container don’t shift the tooltip position.
Here is the snippet to check how it works:
http://snippet.dhtmlx.com/1dd76a744
Hello Joseph,
The dev team added the way to control the QuickInfo popup and moved the methods inside the gantt.ext.quickInfo
object:
https://docs.dhtmlx.com/gantt/whatsnew.html#x4465x70x4466x
https://docs.dhtmlx.com/gantt/desktop__quickinfo_ext.html
Hi @ramil,
Thank you for the effort for bringing this new feature.
I tested out briefly, but there is still no way to control whether to display the quickInfo
in the chart
or grid
, am I right?
I updated previous snippet, could you show me how I can use setContainer
(can I?) to set to display on the grid
instead of the chart
?
Also, if I use gantt.ext.quickInfo.setContent
method, within the onTaskSelected
, there seem to place 2 quickinfo
dialog unless I use setTimeout
but the same does not happen when it use gantt.ext.quickInfo.show()
inside onTaskSelected
Hello @Joseph,
Regarding the first question:
You can specify the container for the quick-info popup using the “setContainer()” method. In order to set the “grid” as a container, you can use the syntax from our documentation(gantt.$grid):
gantt.ext.quickInfo.setContainer(gantt.$grid)
or you can get the grid element using jquery selector, like in the fragment below:
gantt.attachEvent("onTaskSelected", function(id){
var gridElement = document.querySelector(".gantt_grid_data")
gantt.ext.quickInfo.setContainer(gridElement)
});
Here is a demo:
http://snippet.dhtmlx.com/5/1c613e691
You can change the styles of the popup using the “.gantt_cal_quick_info” selector.
Reading the second question:
The behavior with “2 quick info dialogs” that you have occurred, was the result of using both:
gantt.plugins({
quick_info: true,
});
in the “CODE” part of the snippet, and:
<script src="https://docs.dhtmlx.com/gantt/codebase/ext/dhtmlxgantt_quick_info.js?v=20180322"></script>
in the “HTML” part.
So they were two different dialogs from two “different” extensions. When you will remove the extension, which is added in the script tag, the issue will be fixed.
Hi,
I want to, If task type is a project Quick Info should be hidden,.
If task type is not a project Quick Info should be show.
how can I do it?
Hello,
You can try using the quick_info_class
template:
https://docs.dhtmlx.com/gantt/api__gantt_quick_info_class_template.html
There, you can check the task type and return a custom class name. In the style rules, you use the display: none
property to hide the Quick Info.
Here is an example of how it works:
http://snippet.dhtmlx.com/5/f930c8444