Our state of the art Gantt chart


Post by taiki-fr »

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}
    />
  )
}


Post by tasnim »

Hello,
You should be using the tree group feature for this. Please check the docs https://bryntum.com/products/gantt/docs/api/Gantt/feature/TreeGroup

And set your custom field in the project like this

project : {
	taskStore : {
		fields : ['runTitle']
	}
}

We also have a demo on grouping here https://bryntum.com/products/gantt/examples/grouping/

Good Luck :),
Tasnim


Post by taiki-fr »

Thanks for the reply.

It didn't seem like the TreeGroup feature would be right for us because we also have the requirement that the user should be able to drag a row from one group to another to update the value of the custom field. (apologies for not mentioning this.) I saw this in the TreeGroup documentation:

Moving nodes manually in the tree is not supported while it is grouped. The linked records have their own parentId fields, not linked to the original records value.

I took this to mean that row drag-and-drop is not allowed when entries are tree-grouped. Is this still the case?

Starting with the code example at https://bryntum.com/products/gantt/docs/api/Grid/feature/RowReorder, I was able to add group: { fields: 'city' } to change the City field of a row by dragging from one group to another. How can we get this functionality in React with externally-queried data?

Edit: I'm also unable to use the project prop of the <BryntumGantt/> component because it's not allowing me to use inline data if I do so. Is there a different way other than inline data to use data that comes from a GraphQL client? Or a different way to specify the list of custom fields that is compatible with inline-data?

const grid = new Grid({
    appendTo : targetElement,

// makes grid as high as it needs to be to fit rows
autoHeight : true,

features : {
    // enable row reordering by dragging
    rowReorder : {
        showGrip : true
    },
    group: {
      field: 'city'
    }
},

data : DataGenerator.generateData(10),

columns : [
    { field : 'firstName', text : 'First name', width : 150, locked : true },
    { field : 'surName', text : 'Surname', width : 150, locked : true },
    { field : 'city', text : 'City', flex : 1 },
    { field : 'team', text : 'Team', flex : 1 },
    { field : 'score', text : 'Score', flex : 1 },
    { field : 'rank', text : 'Rank', flex : 1 }
]
});

Post by tasnim »

Unfortunately, It's not supported yet. I've created a Feature Request to add support for rowReorder when using TreeGroup. Here it is https://github.com/bryntum/support/issues/5689


Post by taiki-fr »

That's unfortunate to hear; thanks for opening the feature request ticket though. If you have any info to share about the timeline for this ticket, that would be much appreciated.


Post by marcio »

Hey taiki-fr,

We'll have the updates (and possible release version) attached to that ticket, please follow there to get the latest new about it.

Best regards,
Márcio


Post Reply