Our state of the art Gantt chart


Post by lakshminarayana »

Hi Team,

I hope this message finds you well.

I am working on the functionality related to task durations in our project. Currently, we have a feature where we send a parameter in the original data for specific rows to indicate whether they are locked. For instance, let's assume that Task 5 is locked.

Now, when I increase the duration of Task 3, I need to implement a check to see if the end date of Task 3 exceeds the end date of the locked Task 5. If it does, I would like the background color of the locked Task 5 to change to red.

This comparison should only be applied to tasks that come before the locked task.

Could you please guide me on how to achieve this functionality? Any insights or code snippets would be greatly appreciated.

please find the code below, for reference.

{
        uuid: "duration",
        type: "estimatedDuration",
        text: intl.formatMessage(planningTableHead.projectTableDuration),
        editor: new DurationField({
          listeners: {
            change: e => {
              e.source.value = e.value.magnitude;
              e.source.eventRecord.originalData.estimatedDuration =
                e.value.magnitude;
              if (e?.source?.eventRecord?.originalData?.isTimerTask) {
                e.source.value = e.value.magnitude < 0 ? "0 day" : e.value;
              } else {
                e.source.value = e.value.magnitude < 1 ? "1 day" : e.value;
              }
            },
        }),
      },

Thank you for your help!

Best regards,


Post by johan.isaksson »

Hi,

To programmatically affect the appearance of tasks, you should use a taskRenderer function (https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-taskRenderer).

In it, you can perform the comparisons you need to do and assign a CSS class or style to change the color of affected tasks.

const gantt = new Gantt({
  taskRenderer({ taskRecord, renderData }) {
      // Apply the highlightThisTask CSS class when the condition is truthy
      renderData.cls.highlightThisTask = your_logic_goes_here
  }
});

And .highlightThisTask would set background-color, or however you want to highlight.

Best regards,
Johan Isaksson

Post Reply