Hi Team,
Continuing with updating gantt chart, I have initialised the gantt component with column configuration having custom renderer. It worked fine on first render. However, after any re-render (the parent component updates) and there is no data update on the props sent to Gantt component, the expand collapse disappears. I'm not able to figure out why it does so. The data is same. I have attached the code with data and screen shots capturing the two states.
Any insights will be helpful.
Thanks,
Bala.
// Define the custom properties
interface CustomModelProps {
taskType?: "step" | "stage"
description?: string
}
type CustomModel = Model & CustomModelProps
const MyGanttView = () => {
const ganttRef = useRef(null)
const tasks = [{
"id": 0,
"name": "Parent - 1",
"startDate": "2024-08-13T09:00:00+05:30",
"endDate": "2024-08-14T09:00:00+05:30",
"expanded": true,
"children": [
{
"id": "019122d7-9ffa-75b1-9c42-82d5d734221f",
"name": "Child - 1",
"startDate": "2024-08-14T09:00:00+05:30",
"duration": 0,
"rollup": true,
"taskType": "step",
"description": "---description - child - 1---"
},
{
"id": "019122d7-9ffa-75b1-9c42-82e8b76301e9",
"name": "Child - 2",
"startDate": "2024-08-14T09:00:00+05:30",
"duration": 0,
"rollup": true,
"taskType": "step",
"description": "---description -child-2 ---"
}
],
"cls": "stage-container",
"taskType": "stage",
"description": "---description text---"
},
{
"id": 1,
"name": "Parent - 2",
"startDate": "2024-08-14T11:30:00+05:30",
"endDate": "2024-08-14T17:00:00+05:30",
"expanded": true,
"children": [
{
"id": "019122d7-9ffa-75b1-9c42-8312bfb02bdf",
"name": "Child - 1",
"startDate": "2024-08-14T12:00:00+05:30",
"duration": 0,
"rollup": true,
"taskType": "step",
"description": "---description text---"
},
{
"id": "019122d7-9ffa-75b1-9c42-832061f3b7fc",
"name": "Child - 2",
"startDate": "2024-08-14T17:00:00+05:30",
"duration": 0,
"rollup": true,
"taskType": "step",
"description": "---description text---"
}
],
"cls": "stage-container",
"taskType": "stage",
"description": "---description text---"
}]
const ganttConfig = {
readOnly: true,
viewPreset: "hourAndDay",
rowHeight: 60,
project: {
autoSetConstraints: true,
tasks: tasks,
},
rollupsFeature: true,
projectLinesFeature: false,
eventMenuFeature: false,
scheduleMenuFeature: false,
headerMenuFeature: false,
taskTooltipFeature: false,
cellEditFeature: false,
cellMenuFeature: false,
columnReorderFeature: false,
taskMenuFeature: false,
taskEditFeature: false,
rowReorderFeature: false,
columnLinesFeature: false,
columnLines: false,
rowLinesFeature: false,
rowLines: false,
zoomOnTimeAxisDoubleClick: false,
sortFeature: false,
}
return <BryntumGantt
ref={ganttRef}
{...ganttConfig}
columns={[{
type: "name",
field: "name",
text: "Stages",
width: 500,
htmlEncode: false,
renderer: ({
record,
value,
}: {
record: CustomModel
value: string
}) => {
if (record?.taskType === "step") {
return `
<div class="ml-2 flex gap-2">
<div class="diamond-container">
<div class="diamond"></div>
</div>
<div class="flex flex-col gap-1">
<div class="text-sm font-normal">${value}</div>
<div class="text-sm font-normal text-custom-gray-2">
${record?.description}
</div>
</div>
</div>
`
}
if (record?.taskType === "stage") {
return `
<div class="flex gap-2">
<div class="flex flex-col gap-1">
<div class="text-sm font-semibold text-black">${value}</div>
<div class="text-sm font-normal text-custom-gray-2">
${record?.description}
</div>
</div>
</div>
`
}
return value
},
},
]}/>
}
