1. Home
  2. Forum
  3. React - EJ 2
  4. Milestones are not working as expected in Gantt Chart

Milestones are not working as expected in Gantt Chart

Hi,

We recently updated the Syncfusion library to latest version. The Gantt version is 22.2.12.

We mainly use the Gannt with milestones. But it seems that something happen after 20.4.50.

When I drag a milestone in the timeline by one day, and release, the milestone does not get moved to next day. It's kind of working if we drag it for two days or more (but dates are shifted).

Also we noticed that the tooltip that is shown when you drag a milestone, does not show the correct dates in regards to the region where you hover the milestone with the mouse. This happens also in the current version that are in the React Gantt edit demo section that redirects to stackblitz (23.1.36)


2023-09-19 17_04_43-Fueqpn (forked) - StackBlitz.png

We cannot upgrade the libraries for our application until we find a solution for this issue.

Thank you,

Catalin


11 Replies
SJ Sridharan Jayabalan Syncfusion Team September 20, 2023 01:53 PM UTC

Hi Mircea,

 

Greetings from Syncfusion

 

We have reviewed your query, and we are able to replicate the issue that you’ve reported that milestones are not working as expected in Gantt Chart.


To address the problem, we have logged a bug request, and the fix will be provided in the volume release which is scheduled to be rolled out on October 11th, 2023. you can track its status from the feedback link given below.


Feedback Link: Milestones are not working as expected in Gantt Chart in React | Feedback Portal (syncfusion.com)


Note: To view the above feedback, kindly login into your account. 


Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization



Regards,

Sridharan


SJ Sridharan Jayabalan Syncfusion Team October 11, 2023 02:34 PM UTC

Mircea,


Thank you for your patience.

 

We are glad to announce that fix for the issue “Milestones are not working as expected in Gantt Chart” has been rolled out in our patch release (v23.1.38). So please upgrade to our latest version to resolve the problem.

 

  

Please contact us if you require any further assistance.

 

 

Regards,

Sridharan


MC Mircea Catalin October 17, 2023 01:42 PM UTC

Hi Sridharan,


I have tested now, but it seems to be the same issue.

I tried also in Stackblitz with the editing demo for Gantt React from the Syncfusion site. I tried with latest available there 23.1.41 and with 23.1.38 (version mentioned in your last post). Both of them have the same issue with the milestones.

Can you confirm it working on your end? I tried with Chrome and Edge.


Regards,

Mircea


SJ Sridharan Jayabalan Syncfusion Team October 18, 2023 02:15 PM UTC

 Mircea,

According to your query, we have conducted an analysis on our end and have not identified any issues. At our end, milestones are moving correctly, and their tooltip dates are rendering properly based on milestone dragging. For further investigation, we kindly request the following details as mentioned below.

  • If possible, could you provide us with a sample that replicates the issue you are experiencing? This would greatly aid us in identifying the problem and finding a solution.
  • Screenshot/Video Demo to replicate the issue.
  • If possible, please replicate the issue in the shared sample and revert back to us.

Confirm whether the packages has been upgraded properly without any conflicts.

Regards,

Sridharan


MC Mircea Catalin October 26, 2023 11:57 AM UTC

Hi Sridharan,


Sorry for the late response, now I had time to get back to this.

I attached a video of the issue. Please find also the example: https://stackblitz.com/edit/react-zdjctr?file=index.js

The example is nothing special, just the example from the Edit features in the React Gantt demo section. I just added day numbers instead of alphabetical. 

It is happening on 23.1.42 but also in the older versions 23.1.38.

My colleague that handles the UI part, when he tried the fixed version it worked for him, but after some days when I cloned a fresh repo and npm installed the latest packages, it didn't worked for me. So, maybe the fix was there but somebody recompiled unfixed stuff over the versions in NPM or the fix got lost.

I think with certain is that is happening in the official demos as shown in the video and example.


Regards,

Mircea



Attachment: 20231026_140326_12c39b8d.zip

SJ Sridharan Jayabalan Syncfusion Team October 30, 2023 03:08 PM UTC

Mircea,

Based on your query, we understand that the issue is related to the date not updating correctly when dragging a milestone in the Gantt chart. Upon analyzing the situation, we have determined that the tooltip dates are displayed based on the predecessor connections, specifically the 'from' and 'to' dates of the milestone. Points to know are given below.


  1. By default, the Gantt chart has a time range from 8 AM to 5 PM for each task.
  1. Please refer to the attached sample below. TaskID=8 represents a milestone that can be dragged.
  1. When you drag it to the date 13 from 15, you'll notice that the date changes to 12 when you reach the midpoint of date 13. This behavior occurs because the date 13 box is associated with the start time of 8 AM on date 13 and the end time of 5 PM on date 12.
  1. The date displayed in the tooltip corresponds to the date at which the milestone will be rendered once you stop dragging.
  1. So that the date is looks like mismatched. But it's a behavior of Gantt.

 

Query: when I cloned a fresh repo and npm installed the latest packages, it didn't worked for me

For this query, We suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. Please follow the below steps provided to overcome the reported problem. 

  

  1. Delete package.lock.json file from your application. 
  2. Remove the @syncfusion package folder from the node_modules.
  3. Use same versions for all components in package.json file
  4. Then install the new packages.


 

If we misunderstood your query, please share more information about your issue. (explain in detail)

Regards,

Sridharan


MC Mircea Catalin October 31, 2023 07:30 PM UTC

Hi Sridharan,


I think the query is misunderstood. In your provided example please try to move the milestone TaskID=8 to day Apr 17, 2019.


  1. When you hover with the mouse over the milestone taskID=8 in the tooltip is saying Apr 15, 2019.
  2. Drag the milestone to day 17 into the timeline.
  3. Once you are with the milestone over the cell that represents 17, then release.
  4. Now the milestone is located in day 16 instead of 17. 
  5. If you hover the milestone now, the tooltip is saying Apr 16, 2019.
  6. To move it to day 17 you have to drag the milestone to day 18 .. which is wrong.
If the user is dragging a milestone over a specific day in the timeline the milestone should move into that specific cell no matter the time of day. If I release the milestone on 17 it should drop into the 17 and not jump to 16 somewhere random in the cell.

Let me know if you were able to reproduce this issue.

Regards,
Mircea



SJ Sridharan Jayabalan Syncfusion Team November 1, 2023 04:12 PM UTC

Mircea,

Based on your requirement we understood that Milestones are not working as expected in Gantt Chart. Currently we are checking for the feasibility of your requirement at our end and will update you further details by on November 2, 2023.

 

 

 

Regards,

Sridharan


SJ Sridharan Jayabalan Syncfusion Team November 2, 2023 02:48 PM UTC

Mircea,

Based on your last response, we clearly understood your requirement. We will let you know the behavior by sharing the video demo details.

  1. Milestone always rendered with 5pm when it is connected to dependency because the parent predecessor is always ended with 5PM. So, to continue the flow we assigned 5PM to milestone.
  1. When you hover with the mouse over the milestone task ID=8 in the tooltip is saying Apr 15, 2019 - (5PM)
  2. Drag the milestone to day 17 into the timeline. 
  1. Once you are with the milestone over the cell that represents 17, then release. Now the cell 17 represents to be starting time (8AM) of cell 17 and end time (5PM) of cell 16. 
  1. After released dragging, it jumps to 16 cell, here see the tooltip shown is 16. At our end, we drop the milestone while dragging based on the date shown in tooltip.


Note: Try to drag the milestone task id=2, it is dragged and dropped what you expected because it has no parent predecessor (task id=2 not connected with task id=1 with any dependency)

 

 

Since this is default behavior of Gantt Chart’s Milestone behavior.

 



Regards,

Sridharan


MC Mircea Catalin November 8, 2023 09:19 AM UTC

Hi Sridharan,

I just tested having the day working time from 0 to 24. Now it started to work as expected partially, meaning that now when I drag and drop a milestone in a specific date cell, the milestone will drop in that specific cell. Unfortunately now the tooltip is misleading and shows wrong information.

I guess now, with the hours out of the equation, this shows the bug more clearer.

https://stackblitz.com/edit/react-zdjctr-yr7alx?file=index.js

On drag:

Image_3277_1699434701049


After release:

Image_6771_1699434754786

Regards,

Mircea


SS Shereen Shajahan Syncfusion Team November 10, 2023 12:47 PM UTC

Hi Mircea,

We have created a new ticket under your account. Please follow-up in the ticket. We are marking this as solved.

Regards,

Shereen


Loader.
Up arrow icon