Problems with duration and end date - how to re-trigger end_date calculation

Octorilla · July 9, 2025, 9:21pm

I integrated the gantt chart with my backend.
Interaction with the chart is 2-ways. Changes in the backend need to be propaged to the frontend and visa versa.

In my backend I only use duration, I never set the end_date.

Initially I load the data using gantt.parse. The gantt chart will internally calculate the end_date based on the start_date and duration. I use worktimes, so it takes that into account.

When updating a task in the backend and syncing to the frontend, in bulk:

Object.assign() for each task to overwrite the task properties. Since I have no end_date in the backend, it just overwites the start_date and end_date is untouched.
gantt.refreshData();

Since the end_date was already calculated, and end_date has higher priority than duration. So the task duration will be calculated. Depending if the task was moved forward or backward I even get negative durations.

What I really want is the end_date to be recalculated. I tried explicitly setting the end_date to null, but then I get a bunch of exceptions in the front end because end_date should not be null.

How can I fix this?
Is my approach of updating tasks wrong?
Should I manually re-trigger end_date calculation?
Is it possible to use parse as a means to update, or is this a bad idea?

Note that in the future, I might want to support end_date as well in the backend.

Octorilla · July 10, 2025, 2:42pm

I have a similar issue with resource assignment.

If you parse the data, the owner_id from a task will be picked up, but when updating as mentioned in the previous post, this does not happen. Please advise on this one as well.

ramil · July 11, 2025, 7:12am

Hello Tom,
If you have an existing chart and want to update the data from the server, it is better to use the parse method. When you call that method, Gantt doesn’t remove existing tasks. If the dataset in the parse method has the tasks that already exist, they will be updated, if there are new tasks, they will be added.

If you want to remove the existing data, you need to call the clearAll method:
https://docs.dhtmlx.com/gantt/api__gantt_clearall.html

Here is an example:
https://snippet.dhtmlx.com/863xxkcd

This should be the expected approach, as usually, the server data has the dates as strings, and the parse method converts strings to dates.

Alternatively, you need to manually recalculate the end date by using the calculateEndDate method:
https://docs.dhtmlx.com/gantt/api__gantt_calculateenddate.html

And instead of the Object.assign method, you can use the mixin method:
https://docs.dhtmlx.com/gantt/api__gantt_mixin.html

If you enable the third argument, Gantt will overwrite the target object but the existing properties remain if they are not present in the source object.

Here is an example in the snippet:
https://snippet.dhtmlx.com/c1olmk2a

If you modify the task object and don’t call the updateTask method, it is expected that the resource data is not updated as Gantt doesn’t watch the task objects and doesn’t know that something changed:
updateTaskAssignments Gantt Docs.

Octorilla · July 11, 2025, 8:28am

Thanks for the update.

I forwared task update/drag/open/close events to the server.
What does parse method do regarding task update events?

Since the parse method is called from the server I don’t any events sent out. Else I would end up in an infinite event loop.

ramil · July 14, 2025, 10:19am

Hello Tom,

I forwared task update/drag/open/close events to the server.
What does parse method do regarding task update events?

If you attach the onAfterTaskUpdate event and call the parse method, the event is not triggered:
https://snippet.dhtmlx.com/acbn93x3

But, if you enable auto-scheduling and the auto_scheduling_initial config is turned on (default), loading tasks with the parse method may trigger the update events. The events are not called by the parse method. But after you load the data, Gantt calls the autoSchedule method, and because of that, the tasks may be updated.

Here is an example:
https://snippet.dhtmlx.com/l8e6i2zx

Since the parse method is called from the server I don’t any events sent out. Else I would end up in an infinite event loop.

Does it mean that you run Gantt on the server by using the Gantt for Node.js version?
If not, and you trigger the parse method by updating something on the server, you need to implement a custom solution to make sure that you don’t get the infinite loop.
Gantt is a client-side library, and right now, there is no built-in feature to make it work in the multiple user environment, but it is possible to implement a custom solution.
There is a demo that can help you to start:
https://files.dhtmlx.com/30d/527f6eaa401559df691c0d71b4a91a46/gantt_with_live_update.zip

Octorilla · September 19, 2025, 1:12pm

No, im not using gantt server-side using node.

My formulation was not very accurate. Let me rephrase.

Im using the chart in a java/Vaadin solution. Vaadin does server-side rendering and communicates that to the browser.

Vaadin has 2 mechanisms to integrate with javascript components

calling browser functionsExecuting JavaScript in the Browser | Browser features and events | Flow | Vaadin Docs
handling events server-side How to handle application events in Vaadin

When a gantt event happens (drag, add, delete), I wrap it in a application event and it is handled on the server.

If something happens server-side (new data coming in from other channel) I push changes to the front end.

So I have to be careful that I don’t run in a client-server event loop.

ramil · September 22, 2025, 6:06am

Hello Tom,
Thank you for the clarification.
Yes, it is up to you to make sure you don’t end up in unending loop. One of the ways you can try is to use something like a variable to stop the synchronization. When you update something in Gantt, you disable the variable and send the changes to the server. As the variable is disabled, the server shouldn’t send the changes to Gantt. After information is updated on the server, you enable the variable.
Similarly, you can do that on the server: after you send the changes from the server to Gantt, you disable the variable. Then you call the parse method. And after Gantt finished loading the data, you enable the variable to enable the synchronization.

Unfortunately, Gantt doesn’t have a dedicated event handler that fires when Gantt finished loading the data. But you can have a combination of the onParse and onDataRender event handlers:
https://docs.dhtmlx.com/gantt/api__gantt_onparse_event.html

https://docs.dhtmlx.com/gantt/api__gantt_ondatarender_event.html

The onParse event fires when Gantt starts parsing the data and the onDataRender fires when Gantt starts rendering the data. So, if you combine these events, the latter will be called when Gantt finished loading the data and starts rendering it.
To make sure the onDataRender fires only once, you can enable the once parameter in the configuration object of the attachEvent method:
https://docs.dhtmlx.com/gantt/api__gantt_attachevent.html#propertiesofsettingsobject

Here is an example of how it can be implemented:

gantt.attachEvent("onParse", function () {
    gantt.attachEvent("onDataRender", function () {
        // enable the varialbe here
    }, { once: true });
});