{"id":2533,"date":"2014-11-04T18:48:43","date_gmt":"2014-11-04T14:48:43","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2533"},"modified":"2023-05-05T13:56:40","modified_gmt":"2023-05-05T10:56:40","slug":"showing-custom-labels-in-dhtmlxgantt","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/showing-custom-labels-in-dhtmlxgantt\/","title":{"rendered":"DHTMLX Little-Known Features: Showing Custom Labels in dhtmlxGantt"},"content":{"rendered":"

We’ve recently updated<\/a> dhtmlxGantt and we really like what we’ve got as a result. Every single feature completes the component and makes it a powerful JavaScript Gantt Chart<\/a>.<\/p>\n

In this article we’ll tell you about the ability to show custom labels near the Gantt bars<\/a>. <\/p>\n

Sometimes you need to display additional content near the Gantt bars. It can be a person’s name, the priority of the task, the timeframe or something else.
\n
\n\"labels-near-gantt\"<\/p>\n

It can be easily done with a few lines of code.
\n
\nTo place the text on the left side of a task bar, use the leftside_text<\/a> template:
\n<\/p>\n

gantt.templates<\/span>.leftside_text<\/span> =<\/span> function<\/span>(<\/span>start,<\/span> end,<\/span> task)<\/span>{<\/span>
\n    return<\/span> "<b>Priority: <\/b>"<\/span> +<\/span>task.priority<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

If you need to place the content on the right side, use the rightside_text<\/a> template:
\n<\/p>\n

gantt.templates<\/span>.rightside_text<\/span> =<\/span> function<\/span>(<\/span>start,<\/span> end,<\/span> task)<\/span>{<\/span>
\n    return<\/span> "<b>Holders: <\/b>"<\/span> +<\/span> task.users<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

\n\"content-near-gantt\"<\/p>\n

Moreover, you can change the inner text of the task bars and add the needed content to them. For this, use the task_text<\/a> template:
\n<\/p>\n

gantt.templates<\/span>.task_text<\/span>=<\/span>function<\/span>(<\/span>start,<\/span>end,<\/span>task)<\/span>{<\/span>
\n    return<\/span> "<b>Text:<\/b> "<\/span>+<\/span>task.text<\/span>+<\/span>",<b> Holders:<\/b> "<\/span>+<\/span>task.users<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

<\/p>\n

Note that all template functions output the HTML string. This means you can specify not only the text content, but also various visual indicators, icons, etc.
\n
\n\"text-on-task-bar\"<\/p>\n

In case you want to have the different labels for each type of tasks<\/strong>, you can add the conditions into the template functions.<\/p>\n

The template will be called for each task that is displayed in the gantt, providing the task object as an argument of the template function. That allows you to inspect the current item and return appropriate content depending of the type or other properties of the task. <\/p>\n

Check the following example:
\n<\/p>\n

gantt.templates<\/span>.rightside_text<\/span> =<\/span> function<\/span>(<\/span>start,<\/span> end,<\/span> task)<\/span>{<\/span>
\n    if<\/span>(<\/span>task.type<\/span> ==<\/span> gantt.config<\/span>.types<\/span>.milestone<\/span>)<\/span>{<\/span>
\n        return<\/span> task.text<\/span>;<\/span>
\n    }<\/span>
\n    return<\/span> ""<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

We’ve recently updated dhtmlxGantt and we really like what we’ve got as a result. Every single feature completes the component and makes it a powerful JavaScript Gantt Chart. In …<\/p>\n","protected":false},"author":2,"featured_media":3316,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,43,20,14],"class_list":["post-2533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-gantt","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2533"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2533\/revisions"}],"predecessor-version":[{"id":11410,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2533\/revisions\/11410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3316"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Read the related article<\/a> in documentation and check the demo<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"