I’m using your React Gantt component with the syncDataOnLoad new functionality.
I keep getting an Id collision as shown below every time and via page filter I remove and re-add a record that has children. When I filter, remove and re-add a record with no children, I have no problem. The collision id error appears only when I reinsert a previous record that has children. I also tried to change the ids with each new filtering but the problem remains.
If I pass data through the taskStore as taskStore = {{data}}, there is no problem but it is as if it completely replaces the data rather than updating it, because the records lose their internal expansion state and collapse. On the other hand, if I pass data as data = {data}, I encounter the problem I mentioned.
I give here a simple example:
import React, {useState} from 'react'
import { BryntumGantt } from '@bryntum/gantt-react'
const filteredData = [
{
id: '1',
name: 'TABLE',
description: '',
startDate: '2021-06-01T04:00:00.000+00:00',
endDate: '2021-06-02T02:36:00.000+00:00',
children: [
{
id: '2',
name: 'TABLE_BR09',
description: '',
startDate: '2021-06-01T07:00:00.000+00:00',
endDate: '2021-06-01T23:02:00.000+00:00'
},
{
id: '3',
name: 'TABLE_BR05',
description: '',
startDate: '2021-06-01T09:22:00.000+00:00',
endDate: '2021-06-02T02:36:00.000+00:00'
}
]
}
]
const MyComp = ()=>{
const [data, setData] = useState(filteredData)
const [ganttRef, setGanttRef] = useState()
const handleRemoveChild = () => {
const res = filteredData.reduce(
(acc, inc) => [...acc, { ...inc, children: [{ ...inc.children[0] }] }],
[]
)
setData(res)
}
const handleAddChild = () => {
setData(filteredData)
}
const handleRemoveParent = () => {
setData([])
}
const handleAddParent = () => {
setData(filteredData)
}
return (
<React.Fragment>
<button onClick={() => handleRemoveChild()}>removeChild</button>
<button onClick={() => handleAddChild()}>addChild</button>
<button onClick={() => handleRemoveParent()}>removeParent</button>
<button onClick={() => handleAddParent()}>addParent</button>
<BryntumGantt
ref={setGanttRef}
data={data}
locale='it-IT'
columns={[
{
type: 'name',
field: 'name',
text: 'Name',
region: 'left'
},
{
width: 133,
field: 'description',
text: 'Desc',
region: 'left'
}
]}
/>
</React.Fragment>
)
}
export default MyComp
I repeat, if I remove and re-add a child record, there is no problem. if I do the same with the parent, the id collision error appears.
Error -> https://ibb.co/ZT6YqZ7
How can i fix it?