[Feature] Add a level parameter to gantt.templates.grid_indent

Hello.
this template : grid_indent Gantt Docs
allow to style the indents on the left of tasks in the grid.

But, it’s triggered for example 4 times for a task that is level 4. And there is no way to identify on which level we are. That means if i want for example to have
indent 1 = blue
indent 2 = red
indent 3 = yellow
indent 4 = green
I can’t without using alternatives methods like :nth-child in CSS.

Could you add a new parameter “level” like this

gantt.templates.grid_indent = function(task, level) {
  if (task.id === 1541 && level === 1) 
    return "<div class='gantt_tree_indent background_blue'></div>";
}

so we’ll be able to return a specific class for a specific task and a specific indent of the task.

Thank you

Hello,

Thank you for reaching out.
I will forward your feature request to our development team for consideration. However, I cannot provide an exact ETA on when or if it will be implemented.

  1. As a workaround, you can implement this solution for now using the CSS :nth-child pseudo-class, targeting the indent levels using CSS only:
.gantt_tree_indent:nth-child(1) { background-color: blue; }
.gantt_tree_indent:nth-child(2) { background-color: red; }
.gantt_tree_indent:nth-child(3) { background-color: yellow; }
.gantt_tree_indent:nth-child(4) { background-color: green; }
  1. Or you can use the task’s $level property to check at what level the task is:
gantt.templates.grid_indent = function(task) {
  switch(task.$level) {
    case 1:
      return "<div class='gantt_tree_indent background_blue'></div>";
    case 2:
      return "<div class='gantt_tree_indent background_red'></div>";
    case 3:
      return "<div class='gantt_tree_indent background_yellow'></div>";
    case 4:
      return "<div class='gantt_tree_indent background_green'></div>";
    default:
      return "<div class='gantt_tree_indent'></div>";
  }
};

And define the necessary CSS:

.gantt_tree_indent.background_blue { background-color: blue; }
.gantt_tree_indent.background_red { background-color: red; }
.gantt_tree_indent.background_yellow { background-color: yellow; }
.gantt_tree_indent.background_green { background-color: green; }

Please see the examples of how it can be implemented:

  1. DHTMLX Snippet Tool (using :nth-child)
  2. DHTMLX Snippet Tool (using the $level property)

Let us know if you have any further questions or run into issues with the implementation.

Best regards,
Valeria Ivashkevich
Support Engineer

Hello,
thanks for your answer and for forwarding my request.
Unfortunately these workarounds are too generic for my need, that’s why the level parameter in the template would be the best.
Here is what i want to do :
image

So with your first solution you hardcode the colors for each level. But I can have multiple colors for a same level (here activity 4 = green, other activity = red)
And with your second solution it’s the same, you can’t have multiple colors for a same level.

Thank you for the clarification.
You are right, in this case, having the actual level passed as a second parameter to the grid_indent template would indeed give you the flexibility you are looking for.

We have already passed your request to the dev team along with the specific use case you have described. If there are any updates or workarounds closer to what you need, we will let you know.

Best regards,
Valeria Ivashkevich
Support Engineer

1 Like

Hello @Joker,

I am sending you a workaround for your issue that you can use until there is no level parameter left in the gantt.templates.grid_indent template.
This demo shows how to create a custom column in DHTMLX Gantt where each indentation level has its own background color. Here’s how it’s done:
1. Define Custom Colors for Each Task
We store color mappings in a taskColors object:

const taskColors = {
    1: "yellow",
    2: "greenyellow",
    3: "cyan",
    4: "#ebbee9",
};

If a color isn’t defined for a task, we assign a random one using:

function getOrAssignTaskColor(taskId) {
    if (!taskColors[taskId]) {
        taskColors[taskId] = getRandomRgbColor();
        injectRowColorStyles(); // re-render styles
    }
    return taskColors[taskId];
}

2. Apply Row Background Colors
Using gantt.templates.grid_row_class, we assign a unique class to each row based on the task ID:

gantt.templates.grid_row_class = function (start, end, task) {
    return `row-color-${task.id}`;
};

Then we inject dynamic CSS styles into the document head:

function injectRowColorStyles() {
    const rules = Object.entries(taskColors).map(([id, color]) => `
        .gantt_row.row-color-${id} .gantt_tree_content,
        .gantt_row.row-color-${id} .gantt_cell {
            background-color: ${color};
        }
    `).join("\n");

    const styleEl = document.getElementById("gantt-color-styles") || document.createElement("style");
    styleEl.id = "gantt-color-styles";
    styleEl.innerHTML = rules;
    document.head.appendChild(styleEl);
}

We call this once when Gantt is ready, and whenever a new color is generated:

gantt.attachEvent("onGanttReady", function () {
    injectRowColorStyles();
});

3. Render Custom Indentation and Toggle Button
In the first column (color_indent_column), we use a custom template function:

template: function (task) {
    const ancestors = [];
    gantt.eachParent((parent) => ancestors.push(parent.id), task.id);

    const level = task.$level || 0;
    const parts = [];

    for (let i = 0; i < level; i++) {
        const ancestorIndex = ancestors.length - i - 1;
        const ancestorId = ancestors[ancestorIndex] || task.id;
        const color = getOrAssignTaskColor(ancestorId);
        parts.push(`<span class="indent-block" style="background-color: ${color};"></span>`);
    }

    if (gantt.hasChild(task.id)) {
        const isOpen = task.$open;
        const icon = isOpen ? "−" : "+";
        const btnColor = getOrAssignTaskColor(task.id);
        parts.push(`
            <span class="toggle-btn" data-task-id=${task.id} style="background-color: ${btnColor};">
                ${icon}
            </span>
        `);
    }

    return `<div class="color-indent-column">${parts.join("")}</div>`;
}

This logic:

  • Collects the list of ancestor tasks.
  • For each level, renders a colored .indent-block.
  • Adds a colored toggle button for tasks with children.

4. Handle Task Open/Close
Instead of attaching event listeners manually, we intercept task clicks:

gantt.attachEvent("onTaskClick", function (id, e) {
    const target = e.target;
    if (target.closest(".toggle-btn")) {
        const task = gantt.getTask(id);
        task.$open ? gantt.close(id) : gantt.open(id);
        return false; // prevent default toggle
    }
    return true;
});

5. Support Newly Added Tasks
When a user adds a task (via the “+” button in the header), we ensure it gets a color:

gantt.attachEvent("onAfterTaskAdd", function (id) {
    getOrAssignTaskColor(id);
});

Please check the code snippet: DHTMLX - Gantt. Grid indent styles like in Primavera.

Let me know if this resolves your issue.

Best regards,
Valeria Ivashkevich
Support Engineer