Show Labels to Side (For Shorter Width Tasks)

Gantt
#1

On the homepage demo, tasks that have long names shows to the right of the task bar instead of within it. How do I do the same?

We are an Enterprise customer, v6 or 6.1 I think.

Thank you.

#2

Hi @Osensnolf,
In order to do this you can use a few tools:

  1. Templates for rightside_text/leftside_text/task_text to show text in the right place. The code of templates may look like this fragment:
gantt.templates.task_text = function taskTextTemplate(start, end, task) {
  if (getTaskFitValue(task) === "center") {
    return task.text;
  }
  return "";
};
  1. Custom function to compare the task and text sizes.

After that, you will be able to show the text on the rightside/leftside/inside of the task.

Here is a demo:
http://snippet.dhtmlx.com/3663d9bd2

API list:
rightside_text:
https://docs.dhtmlx.com/gantt/api__gantt_rightside_text_template.html
leftside_text:
https://docs.dhtmlx.com/gantt/api__gantt_leftside_text_template.html
task_text:
https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html

Best regards.

#3

Awesome! I’ll ask my developer to give this a try and make sure it works. Much appreciation.

1 Like
#4

In this snippet, we can achieve our goal only if we update task gantt.updateTask(task.id);

I am loading data from database and I’ve separate call for each task update that really slow down loading for me.

Is there any other way to achieve this without this line?

#5

Hello Osensnolf,
I don’t see the updateTask method in the snippet, and it works correctly without that.
If you want to repaint a task but don’t send a database request, you can use the gantt.refreshTask method:
https://docs.dhtmlx.com/gantt/api__gantt_refreshtask.html
And I have a different implementation to move the text to the right side when it doesn’t fit the task bar:
https://snippet.dhtmlx.com/5/c6d3a4df7

If you want to update several tasks at the same time and repaint only one time, you can use the batchUpdate method:
https://docs.dhtmlx.com/gantt/api__gantt_batchupdate.html

If that doesn’t help you, please describe your use case with more details, and send me a snippet where I can reproduce the issue.