Show multiple tasks on one line?

Gantt
#1

I need to be able to show multiple tasks on one line. However, only one of them needs to be able to be interacted with (duration / dates / name changed) so I’m wondering if it is possible to make a purely visual task on the same line as another task. I don’t have the pro license and we can’t afford it (But something similar to the split task tool would be good). Is it possible to do something like this?
I have seen the other responses to similar questions already, and none have provided something close to what I am looking for. I will be happy to clarify the question if needed. Thanks!

#2

Hello,
Using the task_text template, you can put subtasks blocks inside the main task bar, setting an absolute position to place them in the right places in the timeline:

gantt.templates.task_text=(start, end, task) => {
    return showSubtasks(task) || task.text;
};
function showSubtasks(task) {
    if (gantt.hasChild(task.id)) {
        const sub_tasks = gantt.getChildren(task.id);
        substasks = [task.text];
        for (let i = 0; i < sub_tasks.length; i++) {
            const child = gantt.getTask(sub_tasks[i]);
            const child_sizes = gantt.getTaskPosition(child);
            const left_position = child_sizes.left - gantt.getTaskPosition(task).left;
            const task_width = child_sizes.width;
            current_subtask = "<span class='subtask' style='position: absolute; left: "+left_position+"px; width: "+task_width+"px; '>"+child.text+"</span >"
            substasks.push(current_subtask)
        }
        return substasks.join("");
    }
    return false;
};

To make external blocks of subtasks visible, you need to set overflow: visible to the main taskbar:

.gantt_task_content{
    overflow: visible;
}
.subtask{
    display: inline-block;
    background: #6F3AE5;
}

Here is an example in the snippet: https://snippet.dhtmlx.com/iqkdvtk2.
This approach has some limitations compared to gantt.addTaskLayer API, namely the extra blocks won’t be optimized via the smart rendering mechanism, they will be rendered whether they are inside the visible timeframe or not - so rendering will be a bit slower compared to what can be done using layers.
And secondly, quite the opposite problem, extra elements will be removed from DOM when the main bar of the task is located outside of the currently scrolled-in timeframe and is hidden by the smart rendering since the smart rendering only sees the position of the main taskbar.
If that becomes an issue, you can disable smart rendering: https://docs.dhtmlx.com/gantt/desktop__performance.html#smartrendering
In its turn, it may reduce the overall UI performance. In that case, I suggest checking recommendations from the first part of this article
https://docs.dhtmlx.com/gantt/desktop__performance.html

1 Like
#3

Extremely helpful response! I really appreciate all the added detail and the example. Thank you, I am working on implementing this now

1 Like