[REACT] Predecessors updates via row reordering

[galb@control.site]

Hi, I'm using gantt in Next.js application.
I'm initializing the gantt with some data from the server.
The data is shown fine, and when i'm updating predecessor column cell it works too.
The problem is when I'm reordering (drag & drop) the tasks, the predecessors values doesn't change accordingly.

1. Do we need to add some configuration for this to work? Are we missing something?
2. Moreover I want to set the dependencies (connection) type so the user wont be able to change it, or hide it somehow. How can I do that?

const ganttConfig: BryntumGanttProps = {
    draggable: true,
    autoHeight: true,
    maxHeight: '40rem',
    dependencyIdField: 'wbsCode',
    features: {
      sort: false,
      columnLines: false,
      regionResize: false,
      columnReorder: false,
      rowReorder: {
        showGrip: true,
      },
      cellEdit: {
        addNewAtEnd: false,
        editNextOnEnterPress: false,
      },
    },
    project: {
      autoLoad: true,
      taskStore: {
        wbsMode: 'auto',
      },
    },
    columns: [
      { type: 'wbs', text: '', hidden: true },
      { type: 'rownumber', text: '' },
      {
        text: t('name')!,
        field: 'name',
        flex: 1,
      },
      { type: 'name', hidden: true },
      {
        type: 'duration',
        text: t('duration')!,
        flex: 1,
      },
      {
        type: 'predecessor',
        text: t('predecessor')!,
        field: 'predecessors',
        flex: 1,
      },
      {
        type: 'resourceassignment',
        text: t('reporter')!,
        showAvatars: true,
        flex: 1,
        itemTpl: ({ resourceName }: { resourceName: string }) => resourceName,
        editor: {
          chipView: {
            itemTpl: ({ resourceName }: { resourceName: string }) =>
              resourceName,
          },
        },
      },
      {
        type: 'check',
        text: t('picture')!,
        field: 'is_picture_required',
        flex: 1,
      },
      {
        type: 'check',
        text: t('required_approval')!,
        field: 'is_approval_required',
        flex: 1,
      },
    ],
  };

[fabio.mazza]

Hello,
just to clarify, are you talking about the rowReordering feature?
Row reordering does not affect dependencies, except in case a child task is moved to be the parent of its previous parent, then, in this case, the dependency gets invalid.
Please, could you explain to us, in your case, in which way dependencies should change by row reordering?

[galb@control.site]

Hi, yes I'm talking about the rowReordering feature.

I want the logic to be like in the advanced demo:
https://www.loom.com/share/d9a1b5b921854f9f803cbdf8bb5fcf89?sid=33807372-2808-438f-a22a-38f3b190bb25

Moreover I want to set the dependencies (connection) type so the user wont be able to change it, or hide it somehow. How can I do that?

Can you help me with that too?

[fabio.mazza]

Hello,

Moreover I want to set the dependencies (connection) type so the user wont be able to change it, or hide it somehow. How can I do that?

connection types are changeable by dependencyEdit https://bryntum.com/products/gantt/docs/api/SchedulerPro/feature/DependencyEdit and taskEdit https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskEdit features.
Then, I suggest you to disable it by configuring these features or you can hide them and allow the user to edit just the predecessors id and successors id by Gantt columns

columns : [
    {
        type  : 'predecessor',
        text  : 'predecessor',
        field : 'predecessors'
    },
    {
        type  : 'successor',
        text  : 'successor',
        field : 'successor'
    }
    .....
]
.....
features : {
    dependencyEdit : false, // prevent to show dependency editor popup that shows up when double clicking on a link
    taskEdit       : {
        items : {
            predecessorsTab : false, // it hides precessor tab from task editor
            successorsTab   : false // it hides precessor tab from task editor
        }
    },
}
.....

Regarding wbsCode/rowReorder issue, in vanilla version it works well. Now I'm testing on React, I'll let you know.

[fabio.mazza]

I've just tried your BryntumGanttProps in a react example and it works well. Could you please provide me a zip file of your project? Maybe there is some other config that breaks it.

[galb@control.site]

It doesn't work, I meant to disable this one:

Screen Shot 2023-10-06 at 15.18.33.png (28.64 KiB) Viewed 406 times

And unfortunately I cant send my project..
Maybe you can send your react trial?

By the way I'm using inline data (can see the pic at the first message of this ticket), so maybe it causes problems?

[fabio.mazza]

Maybe you can send your react trial?

I've attached the advanced example that you can find in our react framework examples, modified with your ganttConfig.
Regarding the predecessor field, you're right, I forgot that there is a toggle on the right. To remove it, I suggest you to create a simple custom dropdown column to manage predecessor and successor.
Here you can find a list of custom columns https://bryntum.com/products/grid/examples/columntypes/

[galb@control.site]

Hi - still having issue with re rendering the related dependency while dragging and change the order of the task.
I've seen the advance example, there it works as expected and that what im trying to achieve in my project.
As i mentioned before im using inlineData - could that cause the issue?
Thanks.

[alex.l]

Hi galb@control.site,

It shouldn't be the cause. We need a test case where we will be able to reproduce and debug this problem to help you.
Please try to apply required changes (maybe use your dataset?) to the app Fabio attached here, if you think the problem in data and not in extra logic of your app.

[galb@control.site]

Hi Alex thanks for the answer -
I've found out that using transport load with static json - make everything work as expected -
In my case we are starting a project from scratch with this definition:

 project={projectRef} 

 const projectRef = useRef<BryntumProjectModel>(null); 

And adding tasks with the snippet above (see the screenshot onAddActivity)
When taking this approach, it seems like the wbs auto mode does not work for some reason.

Is that give you any hint on the issue?
If not ill try to create a test case.