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]);
}
}
}
},
Best regards,
Márcio
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
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;