Connecting lines to nested tasks or resources

[uglovec]

Hello, could you please tell me how to make such connecting lines for nested tasks or resources as in the screenshot. I tried many options, but nothing worked. I would appreciate it

[Maksim_Lakatkou]

Hello,
Unfortunately, there is no built-in solution for this. However, you can achieve it by using the grid_indent template:

gantt.templates.grid_indent = (item) => {
    let html = "<div class='gantt_tree_indent'></div>";

    if (!item._linesAdded) {
        if (item.$level >= 1) {
            html += "<div class='gantt_tree_link_line gantt_tree_vertical'></div>";

            if (item.$level === 1) { 
                html += "<div class='gantt_tree_link_line gantt_tree_horizontal'></div>";
            }

            if (item.$level === 2) { 
                html += "<div class='gantt_tree_link_line gantt_tree_vertical gantt_tree_parallel'></div>";

                html += "<div class='gantt_tree_link_line gantt_tree_horizontal gantt_tree_horizontal_3'></div>";
            }
        }

        item._linesAdded = true;
    }

    return html;
};

CSS:

.gantt_tree_link_line {
    position: absolute;
    background-color: #ccc;
}

.gantt_tree_vertical {
    width: 2px;
    height: 100%;
    left: 15px;
    top: 0;
}

.gantt_tree_horizontal {
    height: 2px;
    width: 20px;
    top: 50%;
    left: 15px;
}

.gantt_tree_parallel {
    left: 30px;
}

.gantt_tree_horizontal_3 {
    left: 30px;
    width: 20px;
}

Here is an example: DHTMLX Snippet Tool . Please note that this example requires further development and testing.