Our state of the art Gantt chart


Post by bhavadharanisure »

Hi,
We have Gantt and scheduler pro as partner
we have not used bryntum wrappers , instead we have done as below

 
 function PanelComponent(props) {
useEffect(() => {
let container = containerRef.current;
bryntumRefs.current.gantt = new Gantt({
      // startDate: fromRef.current,
      ...ganttConfig,
      project,
      columns:[]
});
bryntumRefs.current.splitter = new Splitter({
        appendTo: container,a
        orientation: "horizontal",
        draggable: true,
        
}); bryntumRefs.current.tabPanel = new TabPanel({ appendTo: container, flex: 1, items:[ { title: "Employee Availability", ref: "employee_availability", items: [ (bryntumRefs.current.employeehistogram = new ResourceHistogram({ ...employeehistogramConfig, project, partner: bryntumRefs.current.gantt,
})), ], }, { title: "Employee Assignment", ref: "employee_assignment", items: [ (bryntumRefs.current.scheduler = new SchedulerPro({ ...schedulerConfig, project, partner: bryntumRefs.current.gantt, })), ], },] }) },[]) return ( <> <div className="ganttContainer" ref={containerRef} />
</> ); }

we want to render a react component inside the tab panel like a tbar section as shown in the image attached highlighted the react component with red line

reactcomp.png
reactcomp.png (75.68 KiB) Viewed 179 times

How to add a react component in between tabPanel and items(scheduler pro and histogram) in our structure.

Is it possible to do without using react wrapper components ?how to add a react component in between tabpanel and items(scheduler pro and histogram) with our original structure ?


Post by saki »

You may have good reasons for not using wrappers but we do not recommend that. Wrappers provide pretty complex and sophisticated Bryntum Gantt update logic preventing it from being re-created on updates. Also, adding the toolbar above tab panel could be easier. Instead of adding the React component into TabPanel you would add it above it:

<BryntumGantt ...>
<BryntumSplitter ...>
<YourComponent ...>
<TabPanel items={[{resourceHistogram}, {schedulerPro}]} ...> // these would be plain instances/configs

Using a React component as an item of a widget or an item of the toolbar is not yet supported, we only support JSX returned from the cell renderer. It is implemented as React Portal so you may try to get the inspiration from that and implement it yourself.


Post Reply