Our state of the art Gantt chart


Post by skonakanchi »

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


Post by marcio »

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.

Best regards,
Márcio


Post by skonakanchi »

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;

Post by tasnim »

Hi skonakanchi,

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


Post by skonakanchi »

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

Last edited by skonakanchi on Fri Mar 17, 2023 12:53 pm, edited 1 time in total.

Post by skonakanchi »

bg-clr.PNG
bg-clr.PNG (34.1 KiB) Viewed 213 times

Post by tasnim »

Hi,

You could use the taskRenderer for that
For Example:

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

Post by Animal »

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.


Post by skonakanchi »

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.


Post by tasnim »

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';
        }
    }
Attachments
Screenshot 2023-03-20 194902.png
Screenshot 2023-03-20 194902.png (56.5 KiB) Viewed 172 times

Post Reply