Show elipses for long task names and show full name on hover

Gantt
#1

Hi,

We have little longer task names for our tasks. Currently the task names are shown cut due to the width set to that column.Is there a way that we can show the longer task names with ellipses, and show full task name on mouse hover on the task name?

Thanks for any inputs.

#2

You may use gantt.templates.task_text:

gantt.templates.task_text = function(start, end, task){ return "<span class='some_ellipsis_class' title='" + task.text + "'>" + task.text + "</span>"; };

If you need ellipsis, define it in “some_ellipsis_class” or just inline. But you may be fine with hint on hover which is added by using “title” attribute.

gantt_test.png996×91 3.35 KB

#3

Just found there is also tooltip extension.

#4

Hello,
I have the same problem (long task names) when I export to .pdf: is it possibile to solve the problem?
In the .pdf file the task name is truncated and I can’t to make the grid too much wide.

Best Regards
Loredana

#5

Hi,

You can try to solve this issue using rightside_text template.
Just check if the text is truncated, and if so - show it on the right side. Demo: docs.dhtmlx.com/gantt/snippet/0a5105a7

There is also leftside_text template.