Hi,
Is there a way to customize the date icon to different color and add character? For the following sample, I need to change the date icon to color orange and add question mark (?) inside.
Hi,
You could use this CSS to achieve this style for milestones
.b-gantt-task.b-milestone .b-gantt-task-content {
background: orange;
}
.b-gantt-task.b-milestone .b-gantt-task-content::after {
content : '?';
position : absolute;
font-size : 15px;
transform : translate(-1px, 0px)
}
This is how it looks like
Hi Tasnim,
How to make this conditional? I need to apply the css for a particular rows only.
You could use https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-cls field to set CSS class to a particular field according to a condition
And style it with your custom CSS cls
You could add this logic inside of taskRenderer https://bryntum.com/products/gantt/docs/api/Gantt/view/GanttBase#config-taskRenderer
Hope this will help.
I tried the following, but the date icon was not changed.
taskRenderer({ taskRecord }: { taskRecord: any }) {
if (taskRecord.name === 'Website Design') {
taskRecord.cls = 'b-gantt-task.b-milestone'
}
},{
"id": 1,
"name": "Website Design",
"percentDone": 50,
"startDate": null,
"manuallyScheduled": false,
"rollup": true,
"endDate": "2022-03-14",
"duration": 0,
"expanded": true,
"leafIconCls": false
},Hi,
You need set a custom class like this
taskRenderer({ taskRecord }) {
if (taskRecord.name === 'Inform management about decision') {
taskRecord.cls = 'myClass';
}
}
And then you need to style with that class
.myClass.b-gantt-task.b-milestone .b-gantt-task-content {
background: orange;
}
.myClass.b-gantt-task.b-milestone .b-gantt-task-content::after {
content : '?';
position : absolute;
font-size : 15px;
transform : translate(-1px, 0px)
}
This will only add this style to that specific task which has myClass class
It has now the ? character, but the background is still blue.
It is working fine here with the gantt basic demo
What are the steps you've done to implement it?
Could you upload a runnable test case?
Hi,
Please find below.
App.scss
@import '~@bryntum/gantt/gantt.stockholm.css';
body,
html {
margin : 0;
display : flex;
flex-direction : column;
height : 100vh;
font-family : Poppins, "Open Sans", Helvetica, Arial, sans-serif;
font-size : 14px;
}
#container {
flex : 1 1 100%;
display : flex;
}
.myClass.b-gantt-task.b-milestone .b-gantt-task-content {
background: orange;
}
.myClass.b-gantt-task.b-milestone .b-gantt-task-content::after {
content : '?';
position : absolute;
font-size : 15px;
transform : translate(-2px, 0px)
}GanttConfig.ts
import { GanttConfig } from '@bryntum/gantt';
const ganttConfig: Partial<GanttConfig> = {
columns : [
{
type : 'name',
field : 'name',
width : 250,
},
{
text: 'Start',
type: 'startdate',
width: 100,
},
{
text: 'Finish',
type: 'enddate',
width: 100,
},
{
text: 'Duration',
type: 'duration',
width: 100,
},
],
viewPreset : 'weekAndDayLetter',
barMargin : 10,
project : {
transport : {
load : {
url : 'data/gantt-data.json'
},
sync: {
url: '/Layout/ProjectTimeView/UpdateGanttData',
method: 'POST',
},
},
autoLoad : true,
autoSync: true,
},
taskRenderer({ taskRecord }: { taskRecord: any }) {
if (taskRecord.name === 'Website Design') {
taskRecord.cls = 'myClass'
}
},
};
export { ganttConfig };GanttApp.tsx
import React, { FunctionComponent, useRef } from 'react';
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './GanttConfig';
import './App.scss';
const GanttApp: FunctionComponent = () => {
const gantt = useRef<BryntumGantt>(null);
return <BryntumGantt ref={gantt} {...ganttConfig} />;
};
export default GanttAppgantt-data.json
{
"tasks": {
"rows": [
{
"id": 1000,
"name": "Launch SaaS Product",
"percentDone": 50,
"startDate": "2022-03-14",
"manuallyScheduled": false,
"expanded": true,
"children": [
{
"id": 1,
"name": "Website Design",
"percentDone": 50,
"startDate": null,
"manuallyScheduled": false,
"rollup": true,
"endDate": "2022-03-14",
"duration": 0,
"expanded": true
},
{
"id": 100,
"name": "Setup web server",
"percentDone": 50,
"duration": null,
"startDate": null,
"manuallyScheduled": false,
"rollup": true,
"endDate": null,
"expanded": true
}
]
}
]
}
}
App.tsx
import React from "react";
import GanttApp from "./GanttApp";
function App() {
return (
<GanttApp />
);
}
export default App;I've updated our gantt basic (react) demo
And it works fine. I've attached that updated demo here
Please check and compare it with you app