Our state of the art Gantt chart


Post by tdar200 »

Im trying to implement auto undo/redo functionality within a react app. The project model is not implemented and BryntumGantt component is imported straight from library. I have tried couple of different ways but have seemed to go nowhere. I wanted to ask what would be the best way to go on about doing this?

  import {BryntumGantt} from '@bryntum/gantt-react';

   <BryntumGantt
          tbar={{
                    type: 'toolbar',
                    items: [  {
                            ref: 'undoButton',
                            tooltip: 'Undo/Redo',
                            text: true,
                            type: 'undoredo'
                        }],
                          autoUpdateRecord: true
}}
/>

The auto update only works for reordering of the tasks.


Post by Animal »

You need to configure the project as in this example: https://bryntum.com/products/gantt/examples/undoredo/

It needs this option setting:

        // The State TrackingManager which the UndoRedo widget in the toolbar uses
        stm : {
            autoRecord : true
        }

Post by tdar200 »

The example instantiates a ProjectModel, but currently we are not using that, we are passing in inline data which throws error that inline data cannot be used with ProjectModel. Is there a way to do it without using ProjectModel?

<BryntumGantt
                    {...staticGanttConfig}
                    ref={bryntumRef}
                    columnLines={featuresState.columnLines}
                    columns={columns}
                    tasks={tasks}
                    dependencies={dependencies}
                    resources={resources}
                    assignments={assignments}

/>

Post by tasnim »

Hi,

Try using the <BryntumProjectModel>
For example

function App() {
    const schedulerpro = useRef();
    const project = useRef();

const [events] = useState(projectData.events);
const [resources] = useState(projectData.resources);
const [assignments] = useState(projectData.assignments);
const [dependencies] = useState(projectData.dependencies);

return (
    <>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader
            children={<BryntumThemeCombo />}
        />
        <BryntumProjectModel
            ref={project}
            events={events}
            resources={resources}
            assignments={assignments}
            dependencies={dependencies}
        />
        <BryntumSchedulerPro
            ref={schedulerpro}
            project={project}
            {...schedulerProConfig}
        />
    </>
);
}

export default App;


Post by tdar200 »

Im trying to implement Versions feature into the app but this guide https://bryntum.com/products/gantt/examples/versions/ utilises container instance to get it working properly. Is there a way to do this without container?


Post by tasnim »

Hi,

If you don't want to use the container, then try using undo-redo
Please check docs https://bryntum.com/products/gantt/docs/api/Scheduler/widget/UndoRedo

Hope this doc will help.


Post by tdar200 »

That problem seemed to be resolved but everytime I make a request to the backend, I am not able to store the state of the app using versions. Even in the example https://bryntum.com/products/gantt/examples/versions/, it seems to reset the undo/redo state after any changes are made.


Post by emil »

Hi tdar200,

Could you please provide more information on exactly what you're doing (request to backend, trying to store state of app) and what exactly happens when you do it?

Also, what changes are you making in the example app that result in the undo/redo state being reset?

Thanks,

Emil


Post Reply