Our state of the art Gantt chart


Post by stevend »

Hi

I'm using Gantt + ResourceHistogram in a React App. When I load my project (from an remote REST API), the Gantt chart is fully updated, showing all the tasks in both the columns and the Gantt chart. The resources are also loaded into the resourceHistogram, but the assignments are not shown. When I make a new assignment via 'Edit task', the ResourceHistogram is not updated either, even though they are shown in the Gantt chart column.

Any ideas what could be wrong?

My setup is as follows (similar to the React example)

    ...
    const ganttRef = useRef(null);
    const histogramRef = useRef(null);

useEffect(() => {
    histogramRef.current.instance.partner = ganttRef.current.instance;
});

return (
    <Fragment>
            <BryntumGantt ref={ganttRef}
                          project={projectConfig}
                          taskMenuFeature={taskMenuFeatureConfig}
                          columns={planningColumnConfig}
                          {...ganttConfig(userSettings)}
            />
            <BryntumSplitter/>
            <BryntumResourceHistogram ref={histogramRef}
                                      project={projectConfig}
                                      {...histogramConfig}
            />
    </Fragment>
)


Post by mats »

The way you define it you create two separate projects but what you want is for the two widgets to share one instance. Review the code in the React demo and you will see the difference:

<Fragment>
            <BryntumDemoHeader
                title="React Gantt Resource Histogram demo"
                href="../../../../../#example-frameworks-react-javascript-resource-histogram"
                children={<BryntumThemeCombo />}
            />
            <div className="demo-toolbar align-right" style={{ display: 'none' }}>
                <BryntumButton
                    dataset={{ action: 'zoomIn' }}
                    icon="b-icon-search-plus"
                    tooltip="Zoom in"
                    onAction={onZoom}
                />
                <BryntumButton
                    dataset={{ action: 'zoomOut' }}
                    icon="b-icon-search-minus"
                    tooltip="Zoom out"
                    onAction={onZoom}
                />
            </div>
            <BryntumGantt ref={ganttRef} {...ganttConfig} />
            <BryntumSplitter />
            <BryntumResourceHistogram
                ref={histogramRef}
                extraData={{ onToolbarAction }}
                {...histogramConfig}
            />
        </Fragment>

Post by stevend »

Thanks, the example code indeed helped me solve this!


Post Reply