Doing so, I have the data "updated" but not everywhere. The data rows into the "Grid" is updated properly (when name change), but every other changes (percentDone, startDate, endDate) on the data isn't propagated to the gantt.
So I changed strategy and use this method instead:
This seems the resolve the issue (all the data is properly updated on both the grid and the gantt), but I'm wondering if this doesn't come with some side effect, and if a better way to achieve what I want exist ?
Last edited by avallete on Wed Oct 27, 2021 9:56 am, edited 2 times in total.
The idea of wrappers is to make the resulting BryntumGantt component as React-ish as possible. Therefore, using the state and mapping tasks to the prop (without other code) should do the trick:
const [tasks, setTasks] = useState();
// ... anything that loads of changes the tasks
return (
<BryntumGantt {...ganttConfig} tasks={tasks} />
)
Note: you may need to set syncDataOnLoad to false on the task store. See viewtopic.php?p=94993#p94993 for details.
I've already tried to use only the "tasks" property of the wrapper component (it was my first approach), but the values won't update properly (the behavior is similar to the issue I have with "taskStore.data = props.tasks", the grid data update but not the gantt).
And when I try to add the "syncDataOnLoad" option with the "tasks" props, I have an error raising from the constructor: "Uncaught Error: Providing both project and inline data is not supported".
Post please your code that we could run, investigate and debug. Wrapper should handle the tasks property correctly and pass it down to the project.taskStore. We need to find the reason why it is not happening.
Simply importing this component as "<Gantt />" into any react project should show the problem. After the 1st timeout of 10s, you will not see the state of the "percentDone" bar change for the children of the 1st task. However, after the change of the name (30s timeout), you'll see the new updated name properly displayed into the Grid.
Indeed, I didn't used the "taskStore" directly into the props before because according to the "GanttConfig" type, this should contain a "model". But I was putting it inside:
However, bypassing this type and using directly the syntax, you provided alongside the "tasks" as props allow me to have fully reactive data. Only issue it cause me is that I was using this syntax to get a "Today" line on my Gantt:
And this syntax, which use "project" definition, isn't allowed with the "props tasks" syntax ("providing inline data and project error"). Is there any other way to add "markers" inside the react wrapper ? (I don't know if I should put this into another topic since the main subject (reactive data) has been resolved with your solution)
Since the component doesn't have type definitions for his props, doesn't really seems to exactly match the types of "GanttConfig" either it's not easy to know which options from the API Documentation I can or cannot use.
Here I made a minimal reproduction example of my gantt configuration (I simply extracted the data sync logic with my backend to have it statically set):
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import "@bryntum/gantt/gantt.material.css";
import type { GanttBase, GanttConfig } from "@bryntum/gantt";
import { BryntumGantt } from "@bryntum/gantt-react";
import * as React from "react";
const serverData = [
{
children: [
{
children: false,
draggable: false,
endDate: "2021-10-30T00:00:00.000Z",
id: "5a33440c-c1b5-4945-a999-edb80c774ab4",
index: 0,
manuallyScheduled: true,
name: "test",
parentId: "357fb463-97aa-40b9-8ef3-f8ec1dc88f88",
percentDone: 0,
resizable: false,
startDate: "2021-10-01T00:00:00.000Z",
taskNumber: "1.1",
type: "subtask",
},
],
draggable: true,
endDate: "2021-10-30T00:00:00.000Z",
expanded: true,
id: "357fb463-97aa-40b9-8ef3-f8ec1dc88f88",
manuallyScheduled: true,
name: "build a wall (Link to Tour Eiffel project)",
percentDone: 100,
resizable: true,
startDate: "2021-10-01T00:00:00.000Z",
taskNumber: "1",
type: "task",
},
{
children: [],
draggable: true,
endDate: "2021-10-26T00:00:00.000Z",
expanded: false,
id: "af098e9c-0ae4-4821-9d29-bf12ce30e823",
manuallyScheduled: true,
name: "talk to contractor",
resizable: true,
startDate: "2021-10-24T00:00:00.000Z",
taskNumber: "2",
type: "task",
},
{
children: [],
draggable: true,
endDate: "2021-10-29T00:00:00.000Z",
expanded: false,
id: "38b491a4-012d-4201-bcdd-4539a8cf5bad",
manuallyScheduled: true,
name: "Some other task",
resizable: true,
startDate: "2021-10-21T00:00:00.000Z",
taskNumber: "3",
type: "task",
},
];
type Config = Partial<GanttConfig> | any;
function Gantt() {
const ganttRef = React.useRef<{ instance: GanttBase }>();
const [tasks, setTasks] = React.useState(serverData);
const config: Config = {
barMargin: 10,
columns: [
{ field: "taskNumber", text: "N°", type: "number", width: 10 },
{ field: "name", type: "name", width: 50 },
],
features: {
// We don't want to use the gantt default edit form
cellEdit: false,
columnAutoWidth: true,
columnLines: false,
// We don't need the task/link dependencies
dependencies: false,
dependencyEdit: false,
nonWorkingTime: false,
// Used to have the percent of progress of a task (validated / subtasks progress)
percentBar: {
allowResize: false,
showPercentage: true,
},
// Used to get the "red line" to show what's the progress on the planning
progressLine: true,
// Should show projectStart projectEnd and Today markers
projectLines: {
// TODO: find out why this doesn't show the "Today" marker
showCurrentTimeLine: {
name: "Today",
},
showHeaderElements: true,
},
taskContextMenu: false,
taskCopyPaste: false,
// Should be able to change date of a task with drag/drop
taskDrag: true,
// It's not really "drag to create" but more "schedule" start/end date to tasks
// who doesn't already have one
taskDragCreate: true,
// We don't want to use the default taskEdit form, instead we open our own dialog
taskEdit: false,
taskMenu: false,
taskResize: {
allowResizeToZero: false,
},
taskTooltip: true,
timeRanges: {
showHeaderElements: true,
},
tree: true,
},
// Keep the scroll within project range
infiniteScroll: false,
maxHeight: "100vh",
maxWidth: "100vw",
// set max zoom level to day
maxZoomLevel: 11,
// set minimal zoom level to acceptable values (multiples years with quarters)
minZoomLevel: 5,
// We need this to have reactive data
// see: https://github.com/bryntum/support/issues/2944
taskStore: {
syncDataOnLoad: false,
},
tbar: [
{
checked: true,
label: "Show Project Line",
listeners: {
change: ({ checked }: { checked: boolean }) => {
console.log(ganttRef.current);
if (ganttRef.current?.instance.features.progressLine) {
ganttRef.current.instance.features.progressLine.disabled =
!checked;
}
},
},
type: "checkbox",
},
{
inputWidth: "7em",
label: "Project Status Date",
listeners: {
change: ({ value }: { value: Date }) => {
if (ganttRef.current?.instance.features.progressLine) {
ganttRef.current.instance.features.progressLine.statusDate =
value;
}
},
},
step: "1d",
type: "datefield",
value: new Date(),
},
],
viewPreset: {
// By default, show (day, week, month) on the same timebar
headers: [
{
align: "start",
renderer: (startDate: Date) => startDate.getMonth(),
unit: "month",
},
{
renderer: (startDate: Date) => startDate.getDate(),
unit: "week",
},
{
dateFormat: "DD",
unit: "day",
},
],
timeResolution: {
increment: 1,
unit: "day",
},
},
};
return (
<div style={{ height: "90vh", width: "90vw" }}>
{/* Make it fit inside the "screen" grid */}
<BryntumGantt
{...config}
ref={ganttRef}
tasks={tasks}
onTaskDrop={({ taskRecords }: { taskRecords: any[] }) => {
const taskRecord = taskRecords[0];
const taskData = taskRecord.originalData;
const filteredTasks = tasks.filter((t) => t.id !== taskData.id);
// Save change into the store
setTasks([
...filteredTasks,
{
...taskData,
endDate: taskRecord.endDate,
startDate: taskRecord.startDate,
},
]);
}}
/>
</div>
);
}
export { Gantt };
Doing so, I wonder if there is any recommended way to provide code examples with gantt-lib + react wrapper (something like: https://stackblitz.com) as it would probably be easier to analyse/share. Since the packages are located on private repositories (and the react wrapper need a package aliasing) I haven't been able to put my code reproduction on such platform.
