Gantt Parent task not showing dates of children tasks

Gantt
#1

When we have a parent task (task type = project) and it has children tasks (task type = regular) when the parent task is closed (i.e., the children tasks are not visible) the start and end date of the parent shows random dates. However, it should show the start date as being equal to the start date of the earliest starting child task and end date equal to the end date of the latest ending child task.

See the screenshot. In the top screenshot you can see the incorrect dates of the parent task FINANCE. However, once the parent task is expanded and the child tasks become visible the parent task shows the correct start and end date - see the bottom screenshot.

We use dynamic loading of the sub-tasks because it would take a long time to load all tasks at the same time. When sub-tasks are not loaded then the start/end dates for the projects are not displayed correctly. We do provide the start/end date from the server, but it is ignored by the library (see screenshot from their documentation).

Is there something we can do to change the behaviour so parent tasks show the correct dates without affecting performance?

Screenshot 2023-06-21 at 12.39.35
Screenshot 2023-06-21 at 12.39.351748×1354 323 KB

#2

Hello,
The start and end dates of a parent task with the type project depend on the dates of its child tasks, and there is no built-in way to change this behavior.
However, you can temporarily change the task type when loading it into the Gantt, for example, to customTask, and customize its display similar to a project task. Here’s an example of a parent task:

{
    id: 1,
    text: 'Project #1',
    start_date: '02-05-2023 00:00',
    end_date: '07-05-2023 00:00',
    $has_child: true,
    type: 'project'
},

Please note that the ‘start_date’ and ‘end_date’ should correspond to the start of the earliest child task and the end of the latest child task, respectively.
To change the task type you can use the onTaskLoading handler:

gantt.attachEvent("onTaskLoading", (task) => {
    if (task.type === 'project' && task.$has_child) {
        task.type = 'customTask';
    }

    return true;
});

You can assign a specific style to the tasks with the ‘customTask’ type using the task_class template:

gantt.templates.task_class = (start, end, task) => {
	if (task.type === gantt.config.types.customTask) {
		return "customTask";
	}

	return "";
};

Styles:

.customTask {
    background: rgb(52, 129, 77);
    border: 1px solid red;
}

Then, when loading the child tasks, you can restore the original type using the onTaskOpened handler:

gantt.attachEvent("onTaskOpened", (id) => {
    const task = gantt.getTask(id);
    if (task.type === 'customTask') {
        task.type = 'project';
    }
});

Here is an example: DHTMLX Snippet Tool