Getting subtasks when using Gantt flat binding

1 Answer 18 Views
Gantt
Brent
Top achievements
Rank 1
Brent asked on 19 Mar 2025, 11:24 PM

Hello,

I'm using the Kendo Angular Gantt chart, using flat binding since that's how the data is stored in my database.  A lot of the example code for editing tasks, dragging tasks, etc. rely on using the subtasks property on the Task to determine if the parent start/end dates or the completionRatio needs to be updated.

What is the best way to calculate the new start/end date or completionRatio when using flat binding?  I know that I could make a call to the database to calculate this, but would prefer to calculate this locally if possible.  Thanks!

Example: see dataItem.completionRatio calculation below.
public onDragEnd(e: TaskDragEvent, gantt: GanttComponent): void {
    const originalItem = { ...e.item.dataItem };
    const editedItem = {
      ...originalItem,
      start: e.start,
      end: e.end,
      completionRatio: e.completionRatio,
    };

    const taskFormGroup = this.createFormGroup(editedItem);
    if (!taskFormGroup.valid) {
      // You can notify the user that the edited item is invalid.
      return;
    }
    // Update the edited item
    Object.assign(e.item.dataItem, {
      start: e.start,
      end: e.end,
      completionRatio: e.completionRatio,
    });

    // Edit the ancestor items accordingly if necessary
    if (this.anyChanged(originalItem, editedItem)) {
      let currentItem = e.item.parent;

      while (currentItem) {
        const dataItem = currentItem.dataItem;
        const subtasks = dataItem.subtasks;

        dataItem.completionRatio =
          subtasks.reduce((acc, curr) => acc + curr.completionRatio, 0) /
          subtasks.length;
        dataItem.start = new Date(Math.min(...subtasks.map((t) => t.start)));
        dataItem.end = new Date(Math.max(...subtasks.map((t) => t.end)));

        currentItem = currentItem.parent;
      }
    }
    gantt.updateView();
  }

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin Bechev
Telerik team
answered on 20 Mar 2025, 04:10 PM

Hi Brent,

Yes, the editing of the Gantt tasks, requires handling the taskDragEnd event to update the tasks accordingly. However, the logic for updating the subtasks for hierarchical and flat binding should be different because of the data structure of course. 

It looks so far we are demonstrating an example implementation of how the Gantt tasks can be updated when working with hierarchical data:

https://www.telerik.com/kendo-angular-ui/components/gantt/editing/drag-and-drop-editing

Taking into consideration the already implemented way of updating the dragged tasks and their subtasks, I created an example that consumes flat data.

The updating of the parent task and its subtasks (along with completion ratio) entirely depends on a custom logic which can be further adjusted by the developer as needed:

https://stackblitz.com/edit/angular-udmxfz1p

Please check it out and let me know how it goes.

Regards,


Martin Bechev
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

Tags
Gantt
Asked by
Brent
Top achievements
Rank 1
Answers by
Martin Bechev
Telerik team
Share this question
or