[REACT] Change project model at runtime

[eluce2]

How do we change the project model at runtime?

[marcio]

Hey eluce2,

Thanks for reaching out.

To change the project model at runtime in a React application, you can update the state that holds the project model. Here's a basic example:

import React, { useState } from 'react';
import { BryntumGantt } from '@bryntum/gantt';

function App() {
    const [project, setProject] = useState(initialProjectModel);

    const changeProjectModel = () => {
        const newProjectModel = createNewProjectModel(); // Your logic to create a new project model
        setProject(newProjectModel);
    };

    return (
        <div>
            <button onClick={changeProjectModel}>Change Project Model</button>
            <BryntumGantt project={project} />
        </div>
    );
}

export default App;

In this example, initialProjectModel is your initial project model, and createNewProjectModel is a function that returns a new project model. When you click the button, it updates the project model used by the BryntumGantt component.

If you're using an inline data approach, with the BryntumGanttProjectModel wrapper, you can have multiple components, where each one will have one ref, or you can use something like loadInlineData in a single component and reload the data of the ProjectModel.

[eluce2]

We're experimenting with this idea again, but what I really want to do is keep 2 projects loaded and constantly updated. For example, when the scheduler scrolls and new data is requested, it should run the requestData functions for both projects. Also, this way when realtime events come in from our backend, we can optimistically update both project's stores, regardless of which one is the "active" one loaded in view for the user to see. The project also need to be linked to both a SchedulerPro instance and a ResourceUtilization instance.

Some of the data would be the same for both projects, such as the resources, calendars, timeRanges, and resourceTimeRanges. But the events and assignments will be different. We are caching the data in a redux store locally so reloading it from 2 different projects shouldn't be an issue. The goal is for the user to be able to switch seamlessly between the 2 data sets, without losing their scroll position or wait for another network request (since the data is already loaded in the browser).

It seems that this approach would create a new project model instance each time it changes and therefore not allow us to keep the data updated in the background. Is there another solution you can suggest that would achieve these goals?

[ghulam.ghous]

Hi,

You can just simply try to update the project instance on scheduler. See the following snippet:

            <BryntumButton text={'Change Project'} onClick={() => {
                if (project == 0) {
                    if (schedulerProRef.current?.instance && projectRef1.current?.instance) {
                        schedulerProRef.current.instance.project = projectRef1.current.instance;
                        setProject(1);
                    }
                }
                else {
                    if (schedulerProRef.current?.instance && projectRef.current?.instance) {
                        schedulerProRef.current.instance.project = projectRef.current.instance;
                        setProject(0);
                    }
                }
            }}/>
            <BryntumSchedulerProProjectModel
                ref={projectRef}
                {...projectProps}
            />
            <BryntumSchedulerProProjectModel
                ref={projectRef1}
                {...projectProps1}
            />

This works alright. And the scroll is not related to project, but it does jump on dataset change. For that you can set the following two on scheduler instance:

    preserveScrollOnDatasetChange : true,
    preserveScroll                : true,

https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/view/SchedulerPro#config-preserveScroll
https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/view/SchedulerPro#config-preserveScrollOnDatasetChange

Screen Recording 2025-07-31 at 9.50.18 PM.mov

(12.2 MiB) Downloaded 47 times

inline-data.zip

(4.06 MiB) Downloaded 40 times