Our state of the art Gantt chart


Post by aneventchin »

Hello,
currently I am using the advanced demo for React. It has a BryntumGantt component with configuration that connects the toolbar class.

tbar: { type: 'gantttoolbar' },

The toolbar class is running

GanttToolbar.initClass();

at the end to register itself.

I want to trigger redux dispatch inside one of the buttons in the toolbar, but to do so, I need to pass the dispatch function to the GanttToolbar somehow.

I tried using 'connect'

export const GanttToolbar = connect()(CustomToolbar);

, but the dispatch function isn't getting passed to the class component.

So in what way can I pass my custom props to the GanttToolbar?


Post by alex.l »

Hi aneventchin,

We have an example with this solution in our Scheduler demo collection. Please, download a trial version of the Scheduler product if you don't have a license and check the source code of this example: https://bryntum.com/examples/scheduler/frameworks/react/javascript/advanced/build/index.html

Btw, I've created a feature request to add an example with using Redux for our Gantt component too: https://github.com/bryntum/support/issues/2717

All the best,
Alex

All the best,
Alex


Post by aneventchin »

Hi alex.l,
I took a look at the demo, and noticed that we are losing the convenience of the 'tbar' config property and accessing the parent for the functions in the toolbar.

Is there a way for me to pass additional information in the 'tbar' config option that will be passed to the Toolbar component like redux dispatch function?

Or what would be the easiest way to convert the existing GanttToolbar class provided in the advanced react demo to a functional component maintaining the working functionalities?

Thanks,
Alexander


Post by saki »

In this case it should be simple, if you have dispatch function available in Gantt functional component. To test it you can modify advanced Gantt example as follows:

Add dummy function dispatch to src/components/Gantt.js and add it also to tbar config:

const Gantt = props => {

    const dispatch = () => {
        console.log('running dispatch')
    }

    const ganttConfig = {
        tbar : { type: 'gantttoolbar', dispatch },

Add a simulation button to src/lib/GanttToolbar.js:

            items: [
                {
                    type: 'button',
                    text: 'Dispatch',
                    onAction(context) {
                        this.parent.dispatch();
                    }
                },

now run the demo and you'll see dispatch running on the button click.


Post by aneventchin »

Thanks for the response, this solved my issue.


Post Reply