Gantt setup in nextjs and nestjs

Gantt
#1

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.

#2

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:
https://docs.dhtmlx.com/gantt/desktop__auto_scheduling.html

Here are examples:
https://docs.dhtmlx.com/gantt/samples/?sample='02_extensions/12_auto_scheduling.html'&filter='auto'

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:
https://docs.dhtmlx.com/gantt/desktop__critical_path.html

Here are examples:
https://docs.dhtmlx.com/gantt/samples/?sample='02_extensions/03_critical_path.html'&filter='crit'

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:
https://docs.dhtmlx.com/gantt/desktop__server_side.html
https://docs.dhtmlx.com/gantt/api__gantt_ajax_other.html

Here are examples:
http://snippet.dhtmlx.com/41d5ffad3
http://snippet.dhtmlx.com/5/d0b0020f8

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