Gantt grid link

Gantt
#1

image
image260×938 51.3 KB

I want to achieve the tree-like connection shown in the image. How can I do this? Are there any ready-made configurations or examples?

#2

Hello @wqh,

To achieve the tree-like connection as shown in your image, you can try to use the CSS :nth-child pseudo-class, targeting the indent levels using CSS:

 	.gantt_tree_indent::after {
		display: block;
		content: '';
		margin: 0 auto;
		width: 3px;
		height: 100%;
	}

	.gantt_tree_indent:nth-child(1)::after {
		background-color: blue;
	}

	.gantt_tree_indent:nth-child(2)::after {
		background-color: red;
	}

	.gantt_tree_indent:nth-child(3)::after {
		background-color: yellow;
	}

	.gantt_tree_indent:nth-child(4)::after {
		background-color: green;
	}

Here’s a complete example: DHTMLX Snippet Tool.

Here’s also another example demonstrating how to create a custom column in DHTMLX Gantt where each indentation level has its own background color: DHTMLX - Gantt. Grid indent styles like in Primavera.
And you can find the explanation of this approach in the following comment: [Feature] Add a level parameter to gantt.templates.grid_indent - #5 by Valeria_Ivashkevich

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

#3

On this basis, I implement the L-shaped hierarchical line, just like in the figure, is there a way to achieve it

#4

Hello @wqh,

To add horizontal lines and create the L-shaped tree connectors, you can target the last .gantt_tree_indent element in each row - specifically, the one right before the task icon.

So, you can use the :has() pseudo-class to select a .gantt_tree_indent that is immediately followed by a .gantt_tree_icon:

.gantt_tree_indent:has(+ .gantt_tree_icon)::before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 11px;
  width: 90%;
  height: 2px;
  background-color: #ccc;
}

.gantt_tree_indent:has(+ .gantt_tree_icon.gantt_blank)::before {
  width: 160%;
}

 .gantt_last_task .gantt_tree_indent:has(+ .gantt_tree_icon)::before {
  top: 95%;
 }

For the indents that are followed by the open/close icon we set width: 90%, and for the indents followed by blank icons (without open/close icons) we set width: 160%.

For the .gantt_tree_indent element in the last task in the tree, we set top: 95% to create this L-shape connector just like in your figure. To identify such tasks and apply the .gantt_last_task css class to them, we use the grid_row_class template to check whether it is the last task in the tree and whether it contains child tasks:

gantt.templates.grid_row_class = function (start, end, task) {
    if (!gantt.getNextSibling(task.id) && !gantt.hasChild(task.id)) {
        return 'gantt_last_task';
    }
    return '';
};

Here’s a full example: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

#5

Thank you so much for your help, it was so helpful for me

1 Like