Add custom row class

Gantt
#1

Hi Team,

I would like to know if there is a way to add custom classes to rows in DHTMLX Gantt, so I can stylize them dynamically.

Eg: rows with different background colours.

image

#2

Hello,

You can customize the styling of rows in DHTMLX Gantt by utilizing the grid_row_class template:

gantt.templates.grid_row_class = (start, end, task) => {
    return "style_owner_" + task.owner_id
};

For example, I added a custom property owner_id to the task:

const data = {
	tasks: [
		...
		{ id: 3, text: 'Task #1.2', start_date: '06-05-2023 00:00', duration: 3, owner_id: 1, parent: '1' },
		...

Each owner has its own color:

const owners = [
    { key: 0, label: "Unassigned", color: "" },
    { key: 1, label: "Ilona",      color: "#d96c49" },
    { key: 2, label: "Tom",        color: "#34C461" },
    ...

When the owner changes, the color of the grid row will dynamically change. You can change the owner using the lightbox section:

gantt.config.lightbox.sections = [
    { name: "description", height: 38, map_to: "text",     type: "textarea", focus: true },
    { name: "owner",       height: 22, map_to: "owner_id", type: "select", label: 'owner', options: owners }
];

You can customize each class for each owner. For example, it can be done dynamically:

gantt.batchUpdate(() => {
    gantt.eachTask((task) => {
        const dynamicStyle = document.createElement('style')
        const ownerClassSelector = ".style_owner_" + task.owner_id;

        dynamicStyle.innerHTML = `
            ${ownerClassSelector}, ${ownerClassSelector}.odd{
                background-color: ${owners.find(owner => owner.key == task.owner_id)?.color};
            }
        `;

        document.body.appendChild(dynamicStyle);
        gantt.updateTask(task.id);
    })
})

Here is an example: DHTMLX Snippet Tool

1 Like
#3

Many thanks I will try this method.

1 Like