Binding Bryntum Gantt data

Bryntum Gantt is a data intensive component that uses several datasets. These datasets usually come from the server and are held in Gantt project during the lifetime of the Gantt view. There are several ways of populating the project data stores.

Using project transport

ProjectModel supports loading and saving of data in multiple stores with transport config. Loading the stores and saving all changes is done in one request.

Configuring project with transport is the simplest way of binding data to the Gantt project stores as seen from the client side, but it does require following a specific protocol on the backend.

The configuration can be as simple as setting the project property like this:

ganttProps: {
    project : {
        loadUrl  : '/server/load/url',
        syncUrl  : '/server/save/url',
        autoLoad : true
    }
}

<BryntumGantt {...ganttProps}/>

With this configuration, the data is loaded and saved from and to the above URLs and the data transport is handled automatically.

Binding existing data to the component

When the application already has a server transport layer then the data for Gantt is available in application code and it needs to be passed (bound) to the component. One approach is to make the data available as state variables and set these as properties of the React component:

App.js:

import React, { useState } from 'react';

import { ganttProps } from './AppConfig';
import { projectData } from './AppData';

import './App.scss';

function App() {

    const [calendars, setCalendars] = useState(projectData.calendars);
    const [tasks, setTasks] = useState(projectData.tasks);
    const [assignments, setAssignments] = useState(projectData.assignments);
    const [dependencies, setDependencies] = useState(projectData.dependencies);
    const [resources, setResources] = useState(projectData.resources);

    return (
        <BryntumGantt
            ref = {gantt}
            calendars = {calendars}
            tasks = {tasks}
            assignments = {assignments}
            dependencies = {dependencies}
            resources = {resources}
            {...ganttProps}
        />
    );
}

export default App;

Here we have state variables, one per data set, together with their setters so whenever a change of data is needed the setter needs to be called with new data as the argument and the change will be immediately reflected in the Gantt.

For example:

setTasks(newTasks);
setResources(newResources);

Binding existing data to the project

This approach binds data to a standalone GanttProjectModel and then uses this project in Gantt. Project has its own markup in the template and it must be assigned to the Gantt during initialization.

This approach is suitable for more complex applications that use more than one Bryntum component that share a common project:

App.js:

import React, { useState } from 'react';

import { ganttProps, projectProps } from './AppConfig';
import { projectData } from './AppData';

import './App.scss';

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

    const [calendars, setCalendars] = useState(projectData.calendars);
    const [tasks, setTasks] = useState(projectData.tasks);
    const [assignments, setAssignments] = useState(projectData.assignments);
    const [dependencies, setDependencies] = useState(projectData.dependencies);
    const [resources, setResources] = useState(projectData.resources);

    return (
        <>
            <BryntumGanttProjectModel
                ref = {project}
                calendars = {calendars}
                tasks = {tasks}
                assignments = {assignments}
                dependencies = {dependencies}
                resources = {resources}
                {...projectProps}
            />
            <BryntumGantt
                ref = {gantt}
                project = {project}
                {...ganttProps}
            />
        </>
    );
}

export default App;

Here we create a standalone GanttProjectModel (without any rendered output) with properties bound to individual data sets. The project must be assigned to Gantt in useEffect which is configured to run only once on component mount.

Check implementation in inline-data React demo.

Working with Redux

Bryntum components can also be integrated with a Redux Store using the same workflow that you would use to manage the state of a traditional React project.

To see this in action, you can try out our Bryntum Gantt Redux Toolkit demo