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