Is there an example on how to setup a Gantt with linked ResourceHistogram in pure React? Until now, I've based my code on the existing (non-react) example, but I would prefer to use the pure react way of working, as I'm switching to 4.1.0. How do I link both components? Any help would be greatly appreciated.
Support Forum
Hello!
We have no React resource-histogram demo in Gantt, but we have such demo in SchedulerPro. You can download the trial to see the sources (SchedulerPro/examples/frameworks/react/javascript/resource-histogram). Basically you need 2 components: <BryntumGantt/> and <BryntumResourceHistogram/> and corresponding configurations. The list of supported wrappers is here: https://www.bryntum.com/docs/gantt/#guides/integration/react.md#wrappers
Cheers!
Pavlo Miklashevych
Sr. Frontend Developer
Thanks for the tip. That really helped! I almost got it working now. My main view now looks more or less like this
const ganttRef = useRef(null);
const histogramRef = useRef(null);
useEffect(() => {
histogramRef.current.instance.partner = ganttRef.current.instance;
});
return (
<Fragment>
<SplitPane split="horizontal" primary="first" defaultSize='75vh' >
<BryntumGantt ref={ganttRef}
project={projectConfig}
taskMenuFeature={taskMenuFeatureConfig}
columns={planningColumnConfig}
{...ganttConfig}
/>
<BryntumResourceHistogram ref={histogramRef}
project={projectConfig}
{...histogramConfig}
/>
</SplitPane>
</Fragment>
)
This seems to works for most of the cases, ie scrolling the Gantt or Histogram view left or right, makes the other view scroll too.
But there are some issues:
- Initially the Gantt view and histogram view are not the same width. Once I resize on, the other changes to the correct size. But ideally they should already have the same width from the start
- When I manipulate the Gantt view via a toolbar (zoom in/out, shift left/right), the histogram view doesn't follow. My toolbar is registered in the
ganttConfig
astbar: {type: PlanningToolbar.type},
, and upon clicking the previous button, calls the following codeThis shifts the Gantt view left, but not the resourcesHistogram. But weirdly, I also have a button to jump to today's date, via the following codethis.gantt.shiftPrevious(); }
and this does scroll both views.onScrollToTodayClick() { this.gantt.scrollToNow({block: "center"}) }
When I manipulate the Gantt view via a toolbar (zoom in/out, shift left/right), the histogram view doesn't follow. My toolbar is registered in the ganttConfig as tbar: {type: PlanningToolbar.type},, and upon clicking the previous button, calls the following code
Reproduced in Scheduler Pro demo. Ticket here: https://github.com/bryntum/support/issues/2695
Initially the Gantt view and histogram view are not the same width. Once I resize on, the other changes to the correct size. But ideally they should already have the same width from the start
Reproduced this one too. Seems the bug appears when both panels are rendered and then get partnered (on the fly, like it's implemented in the React demo). Ticket here: https://github.com/bryntum/support/issues/2696
I faced with another problem, that the locked grid width of the primary partner gets shrunk to match the histogram. The adjustment happens because the partnering happens on the fly, and since both components have different sizes, dates, timeline configs, etc, the components adjust their values. To make it more or less predictable you can comment out this line:
useEffect(() => {
histogramRef.current.instance.partner = ganttRef.current.instance;
});
Then setup column width to match top and bottom locked grid width. And then return the partnering back. That should help to avoid initial width problem.
We are going to add a new React Gantt Resource Histogram demo. I can share the code here, so you can compare with yours. The bugs are reproducible there too. We will address.
Best regards,
Pavel
- Attachments
-
- resource-histogram.zip
- (2.57 MiB) Downloaded 116 times
Pavlo Miklashevych
Sr. Frontend Developer