Gantt setup in nextjs and nestjs

I am using the DHTMLX Gantt plugin to render a Gantt chart in a project built with Next.js (frontend) and Nest.js (backend). The Gantt view currently renders task and link data from the frontend.
We also need to implement the following functionalities:

  • Auto-scheduling of tasks.

  • Displaying and managing the critical paths.

  • Ensuring that any data changes (tasks, links, schedules) are reflected and saved in the database.

Could you provide guidance or examples on how to configure these functionalities using a database setup? A sample implementation or reference code would be helpful.

Hello Mathew,

Auto-scheduling of tasks.

To use the auto-scheduling functionality, you need to enable the auto-scheduling extension. The following article explains how it can be done and how it works:

Here are examples:


Displaying and managing the critical paths.

To show the critical path, you need to enable the critical path extension and enable the highlight_critical_path config.
The following article explains how to do that and what logic Gantt uses to determine the critical path:

Here are examples:


Ensuring that any data changes (tasks, links, schedules) are reflected and saved in the database.

Gantt is a client-side library. It doesn’t directly communicate with the database or the server-side. All changes occur only inside the browser.

To send the changes to the server, you need to use the Data Processor or built-in Ajax module. You can read more about it in the following articles:

Here are examples:

We don’t have ready demos for Nest.js, but here are React and Vue demos where a JSON file is used instead of the database:
https://files.dhtmlx.com/30d/66b153ec28f2f7e8e316c9a908594ad8/reactive-gantt+gantt-instance_9.0.2_trial.zip

https://files.dhtmlx.com/30d/327fbb568a2cdfacf3310edb733e25ff/vue3+gantt-instance+json_db.zip

1 Like