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
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]);
}
}
}
},
Hi,
I'm Getting error Cannot find name 'gantt'.
Please help me
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({Hi,
No I'm unable to access window.gantt .
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.
Hi,
Can you please help me with any other solution without button? Thanks in advance.
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;
Hi,
I'm using react typescript and I'm adding my code here. Please help me how I can do that. Thanks
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;