Bryntum Support Forums

Hi Team,

How we can change the deliverable and activity progress bar background colors based on status. for example deliverable status is 'inprogress' then progress bar bg-color is red otherwise blue like that. for activity we need to apply different bg-color. I am using react typescript

Hey skonakanchi,

Not sure if I understand correctly the progress bar that you want to change color, but if I get it right, you want to change the https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-cls
and you can change that using https://bryntum.com/products/gantt/docs/api/Gantt/view/GanttBase#config-taskRenderer and updating the renderData.cls property.

Thank you Marcio, Yes I am trying to change the gantt task color on the fly. I am facing the issue to access gantt instance in application.

I initialize the gantt as below. but unable to access gantt instance in the trough out the application. Please suggest a solution.

import React, { FunctionComponent, useRef } from 'react';
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './GanttConfig';
import './Gantt.scss';

const ProjectGantt: FunctionComponent = () => {
  const gantt = useRef<BryntumGantt>(null);

  return <BryntumGantt ref={gantt} {...ganttConfig} />;
};

export default ProjectGantt;

Hi skonakanchi,

When do you want to change the color of a task?

Hi Tasnim,

Based on the Task status, I need to change the background color of gantt task bar. Please find the screenshot in latest post

Hi,

You could use the taskRenderer for that
For Example:

    taskRenderer({ taskRecord }) {
        if (taskRecord.name === 'Install Apache') {
            taskRecord.cls = 'red';
        } else {
            taskRecord.cls = '';
        }
    }

You would use a taskRenderer to add a class name to the renderData based upon your own status field that I assume you added to the Model definition.

    taskRenderer({ renderData, taskRecord }) {
        renderData.cls[`b-status-${taskRecord.status}`] = true;
    }

And then add your own CSS rules for the statuses:

.b-gant-task.b-status-0 {
    background-color : red;
}
.b-gant-task.b-status-1 {
    background-color : blue;
}

I would prefer this over setting the cls in the record, because cls may already be in use for other reasons and the record status may change over the life of the application.

Thank you Animal , tasnim.
By using .b-gant-task.b-status-1 , I am able to apply bg-color based on status. But how can we apply different bg-color for subtask based on status. Please provide a suggestion.

Hi,

You could check if https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#property-isLeaf is true or not
if isLeaf is true then it's a children if false then it's not a children

    taskRenderer({ taskRecord }) {
        if (taskRecord.isLeaf) {
            taskRecord.cls = 'bg-color-red';
        }
    }