Using dhtmlxGantt together with Node.js

If you follow our tutorials, you have already known how to use dhtmlxScheduler and dhtmlxGrid with Node.js, a flexible JavaScript platform.

This time we will deal with dhtmlxGantt with Node.js.

You can download the full archive with the final solution from github.

Step 1 – Creating a simple Node.js site

Fortunately, Node.js has a set of ready to use solutions. And we don’t have to write everything from scratch, we will use the ready modules. Express as a web-framework and node-mysql – to work with MySQL. Also, as we are working with dates we need a lib to convert dates to string and back. For this purpose we will need date-format-lite

First of all, let’s create a directory – “gantt-node”, for example, – and install the necessary libraries into it by running the next command:

So, there is no need in more HTML code for the Gantt. There are two includes for js and css files of Gantt. After it code to init gantt comes. Code contains instructions for data loading and data saving, for which we still don’t have a server side code, we will add it later.

To see whether the app works right, we may start the node.js server and open https://localhost:3000 address in a browser. If everything is done correctly, we will see an empty gantt. To start nodejs server, run “nodejs app.js” command.

“/data” handler will be used to load data into the gantt. Here we select all records from tasks and links table, and send them to the client-side as json structure.

NOTE: before sending the records we convert start_date parameter to the string in Year-month-day format. Also, we have set “open” property for each item. It will force gantt to have all branches opened after data loading.

After restarting the server and opening in browser http://localhost:3000 – there will be our gantt with tasks inside.

Here we use “app.post”, as all saving operations use POST queries. The first part of the code shows the type of operation and removes all the technical parameters from an incoming query to get an object that can be saved in the database.

Then, according to the operation type, we carry out the necessary sql query. We have two major blocks – data operations for tasks and data operations for links. In each block we have separate sql code for each type of operation (adding/saving/deleting). As the operations with database are asynchronous, we pass the specified earlier callback function “update_response” as the last parameter. The client side expects to get the confirmation of saving operation or an error message – this is what the “update_response” function is responsible for. It generates an XML response in the necessary format and sends it to the client side. (Details of the format you may learn from the documentation ). If we add a new record, this function also includes ID, generated by MySQL for the new record, into the response to update the element’s id on the client’s side, too.

If we restart the server and open http://localhost:3000 in browser again, we’ll get a gantt with tasks. Clicking on “Add ” button will add new task to the gantt. Double-clicking or dragging the task will allow modifying the task properties or deleting the task. The cool feature is the availability of all the changes even after reloading the page as they’re automatically saved in database.

What is the result?

The server solution is quite simple and can be easily customized. It won’t be difficult to add validation or some kind of data formatting before loading. As Node.js allows using JavaScript on server side, we use the same concepts on both client side and server side, which definitely makes result code more compact and stable. But it also stands to mention that dhtmlxGantt is flexible enough, and integration with any other server side platform will not require much of coding.