Comma separated values in column

Gantt
#1

I have a column named Department which may contain one or more departments. However, depending on the width of the column there may not be enough space to fill all the departments so the obvious approach is to make a custom template like Department-1, Department-2, (+3) and when the user hovers over the cell a popup to appear displaying all the values.

So my question is:

Is there a built-in method to handle this kind of functionality and in case there is no such method how can I implement the popup behavior myself?

#2

any feedback on this one?

#3

Hello Nikolai,
You can use the tooltip extension to show all values in the tooltip when a user hovers the mouse over the grid element.
The tooltip has its own template to display the tooltip text:
https://docs.dhtmlx.com/gantt/api__gantt_tooltip_text_template.html
But the easiest way would be to attach the tooltip to an HTML element:
https://docs.dhtmlx.com/gantt/desktop__tooltips.html#customizationoftooltipbehavior

gantt.ext.tooltips.tooltipFor({
  selector: ".css_class_name",
  html: function(event, domElement){
    return "Your text"
  }
});

Here is an example of how it might work:
http://snippet.dhtmlx.com/a73142b0c

#4

10x for the reply but it seems like this functionality is available after version 6. I am using 5.27.
So basically i need a way to display a build-in or custom popup on mouse hover the specific cell.

Any easy solution?

#5

Hello Nikolai,
Thank you for the clarification.
In that case, you need to do it the old way. You need to change the text in the tooltip text template. To detect the mouse location you can use the onMouseMove event handler:
https://docs.dhtmlx.com/gantt/api__gantt_onmousemove_event.html
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/4383f547f

#6

10x for the fast reply.
This seems to do the job but the tooltip doesnt follow the mouse coordinates. It stays to the right of the grid.

#7

Hello Nikolai,
This is how it worked until the 6.1 version.
I have 2 snippets where the tooltip tries to follow the mouse. In the first snippet, the position is changed in the onMouseMove event handler, in the second snippet, the internal API function is redefined (this is not recommended):
http://snippet.dhtmlx.com/4933d6914
http://snippet.dhtmlx.com/970a711bb

#8

Nice! that would do the trick.
I will try to implement the tooltip to appear for ONE particular column only and if i have difficulties i will ask for support again.