Page 1 of 2
[REACT]
Posted: Thu Mar 16, 2023 2:01 pm
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
Re: [REACT]
Posted: Thu Mar 16, 2023 7:34 pm
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.
Re: [REACT]
Posted: Fri Mar 17, 2023 12:26 pm
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;
Re: [REACT]
Posted: Fri Mar 17, 2023 12:33 pm
by tasnim
Hi skonakanchi,
When do you want to change the color of a task?
Re: [REACT]
Posted: Fri Mar 17, 2023 12:49 pm
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
Re: [REACT]
Posted: Fri Mar 17, 2023 12:52 pm
by skonakanchi
bg-clr.PNG (34.1 KiB) Viewed 317 times
Re: [REACT]
Posted: Fri Mar 17, 2023 2:03 pm
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 = '';
}
}
Re: [REACT]
Posted: Fri Mar 17, 2023 2:08 pm
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.
Re: [REACT]
Posted: Mon Mar 20, 2023 3:18 pm
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.
Re: [REACT]
Posted: Mon Mar 20, 2023 3:51 pm
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';
}
}