Drag-and-Drop on the Taskbar When It Extends Beyond the Viewable Area

[Ryo Moekui]

As shown in the example below, when a task bar (Task1) with a duration longer than the calendar’s fixed display range (year, month, and date) is displayed in a table, I want to drag that task bar and set its start date within the display range (for example, since the current display range is April 1, 2026, to April 30, 2026, I want to set the start date to April 10, 2026). However, However, when I drag it, the starting position defaults to April 1, 2026, and I can’t move it from there.

I can move tasks that fall within the display range (such as Task2 and Task3) without any issues, but is there a way to move tasks that extend beyond the display range in the same way?

Below is a sample code snippet

https://stackblitz.com/edit/react-jhyzwjqs-gu6bdvln

I would appreciate your guidance.

[Ajithkumar Gopalakrishnan]

Hi Ryo Moekui,

Greetings from Syncfusion Support,

Based on your query, we understand that when performing taskbar resize or drag-and-drop actions, the timeline is not updated on the UI of the Gantt Chart. We have validated this scenario using the attached sample and were able to reproduce the case on our end. In the current configuration, the timeline is not updated automatically because the updateTimescaleView property is set to false. When this property is disabled, the timeline will not refresh dynamically during taskbar editing operations. To achieve your requirement, we recommend enabling the updateTimescaleView property or keeping its default value (true). This ensures that the timeline updates automatically during taskbar resize or drag-and-drop actions.

<GanttComponent

        ref={ref}

        ...

        timelineSettings={{

          updateTimescaleView: true,

        }}

      >

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

</GanttComponent>

Sample link: https://stackblitz.com/edit/react-jhyzwjqs-r7wyfwc9?file=index.js







For more details, please refer to the following User Guide documentation:

https://ej2.syncfusion.com/react/documentation/gantt/timeline/timeline#customize-automatic-timescale-update-action

Please let us know if you need any further assistance.

Regards,
Ajithkumar G

[Ryo Moekui]

Thank you for your reply. Thank you also for providing the sample.

Due to the specifications of the system we want to implement, we’d like to keep the timeline fixed, so we’d like to keep the `updateTimescaleView` property set to `false`. In this state, is there a chance that resizing the taskbar or drag-and-drop operations might not work properly?

What we want to achieve is to keep the timeline fixed, then drag and drop a taskbar that extends beyond the timeline to move the start or end date to a date within the displayed timeline.

I would appreciate your guidance on this.

[Ajithkumar Gopalakrishnan]

Hi Ryo Moekui,

Thank you for your detailed explanation.

Based on your requirement, we understand that the timeline needs to remain fixed by keeping the updateTimescaleView property set to false, while still allowing taskbar drag-and-drop or resize operations to move tasks into the visible timeline range.

In this configuration, taskbar editing operations such as drag-and-drop and resizing will still work when the task is fully within the visible timeline. However, there is an important limitation to consider.

When a task extends beyond the visible timeline range (for example, when the task starts before the current view and ends after it), only a portion of the taskbar is displayed in the UI. In such cases, both the start and end positions of the task lie outside the visible area.

Due to this, the Gantt component cannot accurately determine the full task range during interaction. As a result, drag-and-drop or resize operations will not behave as expected, and it will not be possible to reposition such tasks into the visible timeline area.

Conclusion

• Keeping updateTimescaleView = false ensures a fixed timeline
• Taskbar editing works correctly only when tasks are fully within the visible range
• Tasks that extend beyond both sides of the timeline cannot be resized or dragged properly

Recommendation

To achieve the expected behavior, one of the following approaches is required:

• Ensure the task is fully visible within the timeline before performing drag or resize operations

OR

• Allow timeline updates (updateTimescaleView = true) to enable proper repositioning of tasks

Please let us know if you need any further assistance.

Regards,
Ajithkumar G

[Ryo Moekui]

Thank you for your reply.

I understand that the drag-and-drop function is not working as we expected.

We will look into this internally and try to find a solution.

Thank you very much for your detailed explanation.

[Dhinesh Govindharaji]

Hi Ryo Moekui,

Thank you for your response.

We appreciate you taking the time to review this behavior internally. Please feel free to reach out if you need any further assistance.

Regards,

Dhinesh G