Unexpected Behavior in modifiedRecords when Dragging Tasks to First Visible Date in Gantt View

[Emrah Asma]

Hi Syncfusion Support,

I am experiencing an unexpected behavior with the Gantt component (React) when dragging a task to the first visible date in the timeline view. Here's a detailed breakdown of the issue:

🧪 Scenario:

• I am using a timeline with the following timelineSettings:

  privatetimelineSettings: TimelineSettingsModel = {
      weekStartDay: this.props.weekStartDay,
      timelineUnitSize: 60,
      topTier: {
          format: 'MMM dd, yyyy',
          unit: 'Day',
          count: 7,
      },
      bottomTier: {
          unit: 'Hour',
          format: 'EEE, dd',
          count: 24,
      },
  };

• When I drag a task and drop it on the first visible date in the Gantt view (e.g., May 18), the actionComplete event fires, and inside args.modifiedRecords, all tasks are listed — even those that were not changed.

• However, if I drag the task to any date after the first visible day (e.g., May 19+), only the task I dragged is included in modifiedRecords, which is the correct behavior.

🔍 Additional Observation:

While debugging, I noticed a visual behavior:

• When I drop a task on the first visible date, the Gantt timeline view very briefly scrolls back one day (e.g., jumps from May 18 to May 17), and then returns to the correct position.

• This does not happen if I drop the task on any date after the first visible date.

• It seems that this small scroll jump triggers internal re-rendering or re-evaluation of all records.

❌ What I have tried (but did NOT solve the issue):

• Setting projectStartDate and projectEndDate manually.

• Setting timelineSettings.startDate.

• Disabling features like highlightWeekends, includeWeekend.

• Checking for fields like isModified (not available in the modified records).

✅ Expected Behavior:

Only the task that was modified via drag/drop should appear in the args.modifiedRecords array — regardless of which date it is dropped on.

❓ Request:

• Could you please confirm whether this behavior is expected or a bug?

• Is there any known workaround to prevent the Gantt timeline from briefly scrolling backwards when dropping a task on the first visible date?

• Or is there a way to control which records are reported as modified?

Thank you for your support.

Best regards

[Sridharan Jayabalan]

Hi Emrah,

 

 

Greetings from Syncfusion.

 

Query 1 - Only the task that was modified via drag/drop should appear in the args.modifiedRecords array — regardless of which date it is dropped on.

 

In the modifiedRecords, all records that are related to the edited record, such as through parent-child relationships or task dependencies, will be included. If the edited record has no such relations, then only the edited record itself will be present in args.modifiedRecords. This is the default behavior of the Gantt Chart.

If you need only the edited record regardless of any parent-child or dependency relationships, we recommend using args.data in the actionComplete event, as it contains only the directly edited record.

 

Query 2 - Is there any known workaround to prevent the Gantt timeline from briefly scrolling backwards when dropping a task on the first visible date? Or is there a way to control which records are reported as modified?

 

This is the default behavior of the Gantt Chart. To restrict backward scrolling when a task is dropped on the first visible date, we suggest using the actionComplete event. Within this event, for the save requestType, check whether the edited startDate is the same as the projectStartDate using the isSameDate method. If they are the same, reassign the previous projectStartDate to prevent the scroll shift.

 

Refer to the code snippet and sample below for your reference.

 

Code-Snippet:   

 

const Editing = () => {

  let ganttInstance;

  const projectStartDate = new Date('05/15/2025');

  const projectEndDate = new Date('07/28/2025');

 

  function actionComplete(args) {

    if (args.action == 'TaskbarEditing' && args.requestType == 'save') {

      let projectStart = ganttInstance.projectStartDate;

      let editedStartDate = args.data.StartDate;

      if (isSameDate(editedStartDate, projectStart)) {

        // re-assign the projectStartDate again here

        ganttInstance.projectStartDate = new Date('05/15/2025');

      }

    }

    if (args.requestType == 'save') {

    // To get the edited record alone 

      console.log('Edited record only:', args.data);

    }

  }

  function isSameDate(d1, d2) {

// check drag and dropped task startDate and projectStartDate are same

    return (

      d1.getFullYear() === d2.getFullYear() &&

      d1.getMonth() === d2.getMonth() &&

      d1.getDate() === d2.getDate()

    );

  }

 

  return (

    <div className="control-pane">

      <div className="control-section">

        <GanttComponent

          ref={(gantt) => (ganttInstance = gantt)}

          actionComplete={actionComplete}

        >

          <Inject services={[Edit, Selection, Toolbar, DayMarkers]} />

        </GanttComponent>

      </div>

    </div>

  );

};

 

Sample - Sseejgot (duplicated) - StackBlitz

 

If we misunderstood your query, share us detailed information about the requirement. 

 

Regards,

Sridharan