[REACT] Request for info: dependencyIdField

[jhill@achieveit.com]

I'm trying to understand exactly how the dependencyIdField is used. I've read the config docs but it's still un-clear. Is it used as the "lookup" key for both fromEvent and toEvent? Consider the below data structure:

const taskA = { id: 123, alternateId: 234 }; // fromEvent
const taskB = { id: 345 alternateId: 345, dependencyId: 234 }; // toEvent

const dependencies = [{ id: 345, fromEvent: 234, toEvent: 345 }];

const config = { dependencyIdField: 'alternateId', ...otherStuff }; // should this work?

The fromEvent id does not exist as the id on any task, but it does exist in another field alternateId. Can dependencyIdField be used to express a dependency relationship between taskA and taskB by setting it to alternateId?

[marcio]

Hey jhill,

Thanks for reaching out.

Yes, that's correct! The example that you shared should work as you described. It's the field that the dependency store will look up in the task model.

I mentioned this to our team to check if we can make the documentation more clear.

[jhill@achieveit.com]

Maybe I'm doing something else wrong, but it doesn't seem to be working. Using the below code, no dependency line is drawn.

import './App.css';
import { useState, useRef, useMemo } from 'react';
import '@bryntum/gantt/gantt.stockholm.css';
import { BryntumGantt } from '@bryntum/gantt-react';

const DateDisplay = ({ date }) => {
  return <span>{date.toDateString()}</span>
}

function BryntumComponent({ data }) {
  const ganttRef = useRef(null);

  const [dependencies] = useState([{ id: 2, fromEvent: 5, toEvent: 2 }]);

  const tasks = useMemo(() => {
    return data.map((task) => {
      return {
        ...task,
        startDate: task.start,
        endDate: task.due,
        manuallyScheduled: true
      };
    });
  }, [data]);

  const [config] = useState({
    viewPreset: {
      timeResolution: { unit: 'day', increment: 1 },
      headers: [
        { unit: 'year', dateFormat: 'YYYY' },
        {
          unit: 'quarter',
          dateFormat: 'Q',
          renderer: (date, __, { value }) => {
            return `Q${value} ${date.getFullYear()}`;
          }
        },
        {
          unit: 'month',
          dateFormat: 'MMM'
        }
      ]
    },
    subGridConfigs: { locked: { width: '40%' } },
    autoAdjustTimeAxis: false,
    fixedRowHeight: false,
    cellEditFeature: false,
    cellMenuFeature: false,
    columnReorderFeature: false,
    taskMenuFeature: false,
    taskEditFeature: false,
    rowReorderFeature: false,
    columnLines: false,
    projectLinesFeature: false,
    headerMenuFeature: false,
    zoomOnTimeAxisDoubleClick: false,
    zoomOnMouseWheel: false,
    dependenciesFeature: { allowCreate: false },
    sortFeature: false,
  })

  const [columns] = useState([
    {
      type: 'name',
      field: 'name',
      id: 'name',
      autoHeight: true,
      width: 100,
      renderer: (args) => {
        return <div>{args.value}</div>;
      },
      sortable: false,
      leafIconCls: null,
      htmlEncode: false
    },
    {
      field: 'start',
      id: 'start',
      text: 'Start Date',
      type: 'date',
      width: 100,
      htmlEncode: false,
      renderer: ({ record, value }) => {
  

    if (!value) {
      return '';
    }
  
    return <DateDisplay date={value} />;
  }
},
{
  field: 'due',
  id: 'due',
  text: 'Due Date',
  type: 'date',
  width: 100,
  htmlEncode: false,
  renderer: ({ record, value }) => {  
    if (!value) {
      return '';
    }
  
    return <DateDisplay date={value} />;
  }
},
  ]);

  return (
      <div style={{ height: '100%', flex: 1, border: '1px solid black' }}>
        <BryntumGantt 
          ref={ganttRef}
          columns={columns}
          project={{ tasks, dependencies }}
          dependencyIdField="alternateId"
          {...config}
        />
      </div>
  );
}

function App() {
  const [data] = useState([{ id: 1, alternateId: 5, name: 'task 1', start: new Date(2024, 0, 1), due: new Date(2024,1, 27)}, { id: 2, alternateId: 2, name: 'task 2', start: new Date(2024,1, 28), due: new Date(2024,2, 28)}]);

  return (
    <div style={{ height: '100%', display: 'flex', padding: 10}}>
      <BryntumComponent data={data} />
    </div>
  );
}

export default App;

[kronaemmanuel]

Hi there,

I have opened a Github issue to investigate this bug: https://github.com/bryntum/support/issues/8673. Please subscribe to the issue for more update.

Best Regards,
Krona

[jhill@achieveit.com]

Thanks. Are you aware of a workaround?

[tasnim]

Hi,

I'm afraid, We're not aware of any workaround for it. You'd need to wait for this issue to be fixed!
If we find any workaround for it, we'll let you know.

If you have any other questions, please don't hesitate to reach out.

Best regards,
Tasnim