Our state of the art Gantt chart


Post by davide89 »

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?

Last edited by davide89 on Thu Jun 17, 2021 3:48 pm, edited 1 time in total.

Post by saki »

You cannot set data on Gantt like this – it is not a known property of Gantt. Gantt uses https://bryntum.com/docs/gantt/#Gantt/view/Gantt#config-project to encapsulate all stores of Gantt. For more information on project see please https://bryntum.com/docs/gantt/#Gantt/guides/data/project_data.md

I'm aware of the fact that in React it is usual to manage data using arrays of objects, however, we provide a very robust data layer that can be used for retrieving data from the server, for local management (sorting, filtering, etc), for modification and for persisting back to the server. We would suggest to use this data layer (models, stores, etc.) whenever possible. Any React-maintained array is eventually used as a data source for the internal stores anyway.

Nevertheless, there is a bug related to syncDataOnLoad because it improperly handles the tree data. The ticket is here: https://github.com/bryntum/support/issues/3043


Post Reply