[REACT] how to access gantt

[vasudha]

Hi,
how to acces gantt over onclick
here is code where i'm getting error for parent.please provide solution

 {
        type: 'container',
        items: [
          {
            ref: 'previousButton',
            html: (
              <ButtonGroup variant="outlined" aria-label="Basic button group" color="inherit">
                <Button onclick={(props: any) => {
               const gantt = props.source.parent.parent.parent;
              gantt.shiftNext();
           }}>
                  <ChevronLeft />
                </Button>
                <Button>
                  <ChevronRight />
                </Button>
              </ButtonGroup>
            )}]
            Thanks!!

[tasnim]

Hi,

Looks like you're not using bryntum's component for this
You'd need to use BryntumButton instead of Button

Here is our wrappers list https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide#wrappers-overview

And can you also please share the whole config?

[vasudha]

how to access gantt using custom button.

[tasnim]

Hi,

Then you can try this

bryntum.query('gantt')

or best is to use the instance of the gantt
Here is a guide on how to get the instance of gantt in react https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide#accessing-the-bryntum-gantt-instance

Hope this helps

[vasudha]

please give updated vesrion of below code accessing gantt on click

 {
        type: 'container',
        items: [
          {
            ref: 'previousButton',
            html: (
              <ButtonGroup variant="outlined" aria-label="Basic button group" color="inherit">
                <Button onclick={(props: any) => {
               const gantt = props.source.parent.parent.parent;
              gantt.shiftNext();
           }}>
                  <ChevronLeft />
                </Button>
                <Button>
                  <ChevronRight />
                </Button>
              </ButtonGroup>
            )}]
            Thanks!!

[marcio]

Hey,

As Tasmin already mentioned and as you can see in the docs, you need to use React refs for accessing the Gantt in the button that you mentioned. The snippet that you provided doesn't clarify how you are setting your Gantt instance, so I'm sharing a general approach that you could use to access the Gantt.

const ganttRef = useRef(null);

const ganttConfig = {
	// ...other configs
	tbar: {
        type: 'container',
        items: [
          {
            ref: 'previousButton',
            html: (
              <ButtonGroup variant="outlined" aria-label="Basic button group" color="inherit">
                <Button onclick={(props: any) => {
               const gantt = ganttRef.current.instance;
              gantt.shiftNext();
           }}>
                  <ChevronLeft />
                </Button>
                <Button>
                  <ChevronRight />
                </Button>
              </ButtonGroup>
            )}]}
}

return <BryntumGantt
                ref = {ganttRef}
                {...ganttConfig}
                

        />