Adding icons in task bar based on conditions

Gantt
#1

Hello. Right now i have added an icon in task bars. But it gets added to each task bar since i gave styling in css. But i want it to appear only in tasks

IMG_20230222_155435
IMG_20230222_1554351920×433 49.9 KB

having condition variant(column whose value is left drive) .
How can i do it?

#2

Hello,

With the task_text template, you can add any HTML element inside the taskbar:

gantt.templates.task_text = function (start, end, task) {
    if (task.variant) {
        return `<i class="fa-sharp fa-solid fa-triangle-exclamation"></i>`;
    }

    return '';
};

Icons taken from here:

<script src="https://kit.fontawesome.com/7bc4fb1ca9.js" crossorigin="anonymous"></script>

My test data looks like this:

const tasks = {
    data: [
        { id: 1, text: "Operation Group #1111", start_date: "23-02-2023 00:00", duration: 9, open: true, type: "project" },
        { id: 2, text: "riveting1",             start_date: "23-02-2023 00:00", duration: 9, progress: 0.5, parent: "1" },
        { id: 3, text: "riveting2",             start_date: "23-02-2023 09:00", duration: 9, progress: 0.5, parent: "1", variant: "Left Drive" }
    ],
    links: [
        { id: "23", source: "2", target: "3", type: "0" }
    ]
};

Please see an example: https://snippet.dhtmlx.com/2zh5ewc4