Our state of the art Gantt chart


Post by bharat95 »

Hi,

When I add a new task, I want that newly added task in edit mode and new task should be selected instead of from where I added a new task. How I can do that please help?

Thanks,
Bharat


Post by marcio »

Hey Bharat,

You could add a listener to the following event - https://bryntum.com/products/gantt/docs/api/Core/data/mixin/StoreCRUD#event-add

And then use the following function to select the new task https://bryntum.com/products/gantt/docs/api/Grid/view/mixin/GridSelection#function-selectRow

And then use the following function to open the editor with the new task https://bryntum.com/products/gantt/docs/api/Gantt/view/GanttBase#function-editTask

So you'll have something like this:

const gantt = new Gantt({
    appendTo          : 'container',

project : {
	// Other configurations...
    eventStore : {
        listeners : {
            add : ({ records }) => {
                gantt.selectRow(records[0]);
                gantt.editTask(records[0]);
            }
        }
    }
},

Best regards,
Márcio


Post by bharat95 »

Hi,

I'm Getting error Cannot find name 'gantt'.
Please help me


Post by marcio »

Hey,

Are you able to access window.gantt from your project?

Please note that at the start of the Gantt definition, I set the gantt variable

const gantt = new Gantt({

Best regards,
Márcio


Post by bharat95 »

Hi,

No I'm unable to access window.gantt .


Post by marcio »

Ok, so let's try another approach.

You can check our advanced demo here https://bryntum.com/products/gantt/examples/advanced/

That we have a create button in the toolbar, if you check the code of that demo, you'll see how to navigate to the row.

Best regards,
Márcio


Post by bharat95 »

Hi,

Can you please help me with any other solution without button? Thanks in advance.


Post by tasnim »

Hi,

You could set this event listener inside of useEffect and get the gantt instance from ganttRef
Here is the App.js file code

/**
 * Application
 */
import React, { Fragment, useEffect, useRef } from 'react';

import { BryntumDemoHeader, BryntumThemeCombo, BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './AppConfig';
import './App.scss';

const App = () => {
    const ganttRef = useRef(null);
    // edit button click handler
    const handleEditClick = ({ record, grid : gantt }) => {
        gantt.editTask(record);
    };

useEffect(() => {
    const gantt = ganttRef.current.instance;
    gantt.project.taskStore.on('add', (props) => {
        gantt.editTask(props.records[0]);
    })
}, [])

return (
    <Fragment>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader
            children={<BryntumThemeCombo />}
        />
        <BryntumGantt
            {...ganttConfig}
            ref={ganttRef}
            extraData={{ handleEditClick }}
        />
    </Fragment>
);
};

export default App;


Post by bharat95 »

Hi,

I'm using react typescript and I'm adding my code here. Please help me how I can do that. Thanks

Last edited by bharat95 on Wed Apr 05, 2023 10:01 am, edited 1 time in total.

Post by tasnim »

Hi,

And this one is for React-Typescript

/**
 * Main Application script
 */
import React, { Fragment, FunctionComponent, useEffect, useRef } from 'react';

import { BryntumDemoHeader, BryntumThemeCombo, BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './AppConfig';
import './App.scss';

const App: FunctionComponent = () => {
    const ganttRef = useRef<any>();

useEffect(() => {
    const gantt = ganttRef.current.instance;
    gantt.project.taskStore.on('add', (props : any) => {
        gantt.editTask(props.records[0]);
    })
}, []);
return (
    <Fragment>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader
            children = {<BryntumThemeCombo />}
        />
        <BryntumGantt ref={ganttRef} {...ganttConfig} />
    </Fragment>
);
};

export default App;

Post Reply