Can we use multiple grid_row_class and task_class in gantt.js file?

Gantt React Gantt
#1

Can we use multiple task_class and grid_row_class in Gantt file?

  1. what happening with me is I am using multiple grid_row_class for different different thing use but its not working so can you please help me here?

  2. How can I set the background colour of the parent task of gantt means I want to set bg color of whole row grid to timeline?
    @ArtyomBorisevich @ramil

#2

Hello,

what happening with me is I am using multiple grid_row_class for different different thing use but its not working so can you please help me here?

If you define multiple grid_row_class or any other templates, only those defined below will work. So, each template should be defined only once.

Please check the example:
DHTMLX Snippet Tool ;
As you can see, the last template applies the CSS class.

How can I set the background colour of the parent task of gantt means I want to set bg color of whole row grid to timeline?

For this case, you need to use grid_row_class and task_row_class templates:

task_row_class Gantt Docs ;
grid_row_class Gantt Docs ;

You can get the parent task with the help of hasChild method:
hasChild Gantt Docs ;

Please check the following snippet:
DHTMLX Snippet Tool ;

#3

So I have multiple works on the Grid class and Task class. How can I use all the Grid class and Task class that are defined in my code?

#4

Hello,

I’m not sure if I understood your question correctly. If you want to apply your different classes to the grid and tasks, so you need to return the required CSS class which suits the desired conditions.
Please check the example:
DHTMLX Snippet Tool ;

If you meant something different, please clarify your question.

#5 
    gantt.templates.grid_row_class = function (start, end, task) {
        if (task.type === 'project') {
            return "project-row";
        }
    };

    gantt.templates.grid_row_class = function (start, end, task) {
        // added the semi-transparent to the grid
        if (task.isHidden && task.semiTransparent) {
            return "semi-transparent";
        }
        return "";

I want to use different classes of grid_row_class, meaning I want to use multiple returns for grid_row_classes that will work properly in gantt.

#6

yesss you can, but ensure you use a space-separated list of classes and that your CSS is correctly targeting these classes. to set the background color of the entire row for a parent task, you can use the task_class property in your Gantt configuration to apply a specific class, then style that class in your CSS. for example:

gantt.config.task_class = function (task) {
    return task.parent ? "parent-task-row" : "";
};

.parent-task-row {
    background-color: #f0f0f0; /* Set your desired background color */
}
#7

Earlier you mentioned that only the last grid row class will be added when using multiple grid classes. How can I use multiple grid classes?

#8

Hello,
Gantt can have only one template with the same name. So, if you define the template multiple times with the different code, only the last one will work:

// this template won't work because it will be replaced by the lower template
gantt.templates.grid_row_class = function (start, end, task) {
    if (task.type === 'project') {
        return "project-row";
    }
};

// only this template will work as it will replace all other template configurations above
gantt.templates.grid_row_class = function (start, end, task) {
    // added the semi-transparent to the grid
    if (task.isHidden && task.semiTransparent) {
        return "semi-transparent";
    }
    return "";
};

If you have several conditions, you need to return all of them within the same template:

gantt.templates.grid_row_class = function (start, end, task) {
    const css = [];
    if (task.type === 'project') {
        css.push("project-row")
    }
    // added the semi-transparent to the grid
    if (task.isHidden && task.semiTransparent) {
        css.push("semi-transparent");
    }
    return css.join(" ");
};

This is how it is done in the official samples:

1325×661 111 KB