Hi,
I'm using BryntumGantt with inline data and I'm trying to get the Group feature to work using a custom property in the TaskModelConfig. I tried creating a custom TaskModel class per https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#subclassing-the-taskmodel-class but ran into the error message saying that the project
property can't be used together with inline data.
Our requirement is to integrate the Gantt with data queried using our graphQL client - is it possible to do this and group rows by our own custom fields? Thanks so much for your help!
Edit: something else that I tried was mapping the data into an array of the custom TaskModel class I mentioned above, and passing that into the tasks
inline data prop of the <BryntumGantt/>
. This threw the error Uncaught TypeError: d[nB(...)][nB(...)] is not a function
Please see this simplified example where we're trying to group by the runTitle
property:
import { BryntumGantt } from '@bryntum/gantt-react'
import '@bryntum/gantt/gantt.stockholm.css'
import { FC } from 'react'
export const RunsTimeline: FC = () => {
const tasks = [
{
id: 'RunStep:20882',
name: '20882 step one',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2770 -',
children: []
},
{
id: 'RunStep:20883',
name: '20883 step two',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2770 -',
children: []
},
{
id: 'RunStep:20884',
name: '20884 step three',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2770 -',
children: []
},
{
id: 'RunStep:20885',
name: '20885 step four',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2770 -',
children: []
},
{
id: 'RunStep:20886',
name: '20886 step one',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2771 -',
children: []
},
{
id: 'RunStep:20887',
name: '20887 step two',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2771 -',
children: []
},
{
id: 'RunStep:20888',
name: '20888 step three',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2771 -',
children: []
},
{
id: 'RunStep:20889',
name: '20889 step four',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2771 -',
children: []
},
{
id: 'RunStep:20890',
name: '20890 step one',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2772 -',
children: []
},
{
id: 'RunStep:20891',
name: '20891 step two',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2772 -',
children: []
},
{
id: 'RunStep:20892',
name: '20892 step three',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2772 -',
children: []
},
{
id: 'RunStep:20893',
name: '20893 step four',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2772 -',
children: []
},
{
id: 'RunStep:20894',
name: '20894 step one',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2773 -',
children: []
},
{
id: 'RunStep:20895',
name: '20895 step two',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2773 -',
children: []
},
{
id: 'RunStep:20896',
name: '20896 step three',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2773 -',
children: []
},
{
id: 'RunStep:20897',
name: '20897 step four',
startDate: null,
endDate: null,
expanded: true,
manuallyScheduled: true,
runTitle: 'timeline test 1 2773 -',
children: []
}
]
const dependencies = [
{
fromTask: 'RunStep:20882',
toTask: 'RunStep:20883'
},
{
fromTask: 'RunStep:20883',
toTask: 'RunStep:20884'
},
{
fromTask: 'RunStep:20885',
toTask: 'RunStep:20884'
},
{
fromTask: 'RunStep:20886',
toTask: 'RunStep:20887'
},
{
fromTask: 'RunStep:20887',
toTask: 'RunStep:20888'
},
{
fromTask: 'RunStep:20889',
toTask: 'RunStep:20888'
},
{
fromTask: 'RunStep:20890',
toTask: 'RunStep:20891'
},
{
fromTask: 'RunStep:20891',
toTask: 'RunStep:20892'
},
{
fromTask: 'RunStep:20893',
toTask: 'RunStep:20892'
},
{
fromTask: 'RunStep:20894',
toTask: 'RunStep:20895'
},
{
fromTask: 'RunStep:20895',
toTask: 'RunStep:20896'
},
{
fromTask: 'RunStep:20897',
toTask: 'RunStep:20896'
}
]
return (
<BryntumGantt
width={1000}
height={800}
dependenciesFeature={{
allowCreate: false
}}
groupFeature={{
field: 'runTitle'
}}
percentBarFeature={{
allowResize: false
}}
projectLinesFeature={{
disabled: true
}}
tasks={tasks}
dependencies={dependencies}
/>
)
}