Task bar wider or smaller than Project bar

Gantt
#1

Hello

I looked at the the basic initialization diagram

I made a Json Gantt as follows (note: all the bars are not resizable):

var tasks = {
“data”:[
{id:“111_11”, text:“MY_PROJECT”, start_date:“18-03-2018”, end_date: “10-04-2018”, progress: 0.6, open: true},
{id:“999_12”, text:“START ANALYSIS”, start_date:“22-03-2018”, end_date: “31-03-2018”, parent:“111_11”, progress: 1, open: true},
{id:“999_13”, text:“DESIGN”, start_date:“02-04-2018”, end_date: “07-04-2018”, parent:“111_11”, progress: 1, open: true},
{id:“999_14”, text:“TEST”, start_date:“05-04-2018”, end_date: “08-04-2018”, parent:“111_11”, progress: 1, open: true}
],
“links”:[
{id:“555_100”,source:“111_11”,target:“999_12”,type:“1”},
{id:“555_101”,source:“999_12”,target:“999_13”,type:“0”},
{id:“555_102”,source:“999_13”,target:“999_14”,type:“0”},
]
};

Despite my Json Gantt looks like the Json of the link above, the START ANALYSYS bar cannot start after MY_PROJECT start date, as well as TEST cannot end before MY_PROJECT end date, but they start and/or end at the same date.

Seems as if the bars are tied, like the following example

how can I solve the problem?

Thank you all in advance for your replies

#2

Hello,
You need to add type: "project" property to your MY_PROJECT task, and "parent": "id of the MY_PROJECT" property to other tasks. A project task is a task that starts, when its earliest child task starts, and ends, when its latest child ends. You can read the article about it:
https://docs.dhtmlx.com/gantt/desktop__task_types.html#projecttasks ;
Please check the following example:
https://snippet.dhtmlx.com/tq83oyr7