In dthmlx gantt Chart inside gantt_task_content how i can create custom elements

Gantt
#1

I want to create two nodes as well as the top border inside the block is it possible with the dhtmlx if it is possible how we can achieve that. sample image i have attached below

Untitled
Untitled960×264 2.41 KB

#2

Hello Nitish,
You can add custom HTML elements in the timeline by using the addTaskLayer method:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html
To calculate the position of the elements, you can use the getTaskPosition method"
https://docs.dhtmlx.com/gantt/api__gantt_gettaskposition.html
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/5/7a39e8b9b

If you want to put all of this inside the task bar, you will need to use the task_text template where you can return any HTML elements:
https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html

#3

Hi Ramil this solution works but if i want to add elements in the sub-group not in header of the group so how can i do that

Screenshot%202021-05-24%20144606
Screenshot%202021-05-24%20144606918×271 15 KB
here i dont want custom element

#4

Hello Nitish,
In that case, you need to use the leftside_text and rightside_text templates:
https://docs.dhtmlx.com/gantt/api__gantt_leftside_text_template.html
https://docs.dhtmlx.com/gantt/api__gantt_rightside_text_template.html
Here is an example:
http://snippet.dhtmlx.com/5/58b870e6f

#5

Hi,
If i want custom element in task #1 only not everywhere so for that what can be done

#6

Hello Nitish,
If you want to add custom elements only for task #1, you can check the ID parameter at the beginning of the addTaskLayer method or side text templates:
http://snippet.dhtmlx.com/5/8b6fe31bc
http://snippet.dhtmlx.com/5/00b0d9997

If you want to display them only for the tasks that don’t have children, you can check that with the hasChild method:
https://docs.dhtmlx.com/gantt/api__gantt_haschild.html
http://snippet.dhtmlx.com/5/4dec549e5
http://snippet.dhtmlx.com/5/c1e8eaf3c