Using dhtmlxGantt with Ruby on Rails [Tutorial]

There’s no limit to perfection. And no limit to our intentions of providing you with different possible ways of combining our components with your favorite development tools. For example, you can check this tutorial that describes how you can use our dhtmlxGantt along with the Laravel framework.

This time, we’ll go a little bit further and offer you to add a new skill to your knowledge baggage. Let us introduce to you this step-by-step tutorial that covers the using of dhtmlxGantt along with Ruby on Rails.

Creating a New Project

If you don’t have Ruby on Rails installed, you can follow this installation guide. Installation method may difer according to the operating system you use, but it shouldn’t take long. After you finish installing Rails, you’ll be able to create a new project.

To do so, type in your terminal:

rails new path/to/your/project

Now, your first Ruby on Rails project is officially created. Before testing the application, let’s deal with creating a controller and routing.

Controllers and Routes

Controller’s primary task is to receive requests that users send to an application. To define which controller will receive a particular request, you use routing. Usually, applications have several routes and controllers. Different routes can be served by different actions. Actions collect the information that will be provided to a view.

Let’s create a new controller named home. Besides the controller, we’ll create a new action named index.

cd path/to/your/project
rails generate controller home index

The output should confirm that new files were created. Now, let’s config the routing. Open the file config/routes.rb and find the following line at the very beginning of this file:

Doesn’t look so impressive at this step, but everything works fine which is a good sign.

Let’s proceed with the views.

Unpacking dhtmlxGantt and Creating the Views

A view’s work is to display the information that was previously collected by an action in a human readable format. Before creating a new view, we need to download the dhtmlxGantt package.

The vendor directory of your project contains third-party code. This is where we’ll unpack the dhtmlxGantt files. It will take two steps:

1. Unpack the file codebase/dhtmlxgantt.js and the directory codebase/ext from the package to the directory vendor/assets/javascripts/ of your project
2. Unpack the file codebase/dhtmlxgantt.css and the directory codebase/skins from the package to the directory vendor/assets/stylesheets/ of your project

Now, we should add this new files to the precompile array. Open the config/initializers/assets.rb file and add the following code:

Let’s now create a view. If there’s no controller-specific layout, Rails will use the app/views/layouts/application.html.erb. This file is a template for all pages that have common elements. We’ll use it to include dhtmlxgantt.js and dhtmlxgantt.js to our project. Open this file and replace the existing code with the following:

Now we can define a view for the home controller that we have created earlier. Open the file app/views/home/index.html.erb and add the DIV container for the Gantt chart along with the code that initializes the chart:

<div id="gantt_here" style='width:100%; height:800px;'></div>

<script>
gantt.init("gantt_here");</script>

We can check the changes that we’ve made. If you’ve stopped the server you can run it again (rails server), and here’s what you’ll see in your browser:

It’s already something. There’s a Gantt chart that allows you create and change new tasks. But at the moment, your application can’t save the changes. Let’s fix it.

Creating the Models

Our application requires two models: one for the tasks and one for the links between them.

At least, we can check the final result. If you open your application in browser, you’ll see two tasks and a link between them. These are the tasks that we’ve created earlier.

You can create new tasks and links and change them. The application will save the changes to the database.

Hopefully, this article will be useful to you. Here you can also learn how to use dhtmlxScheduler with Ruby on Rails. Do not forget to visit our blog from time to time. There will be more helpful tutorials for you.

Recently we’ve shared the detailed tutorial that explains how to use our event calendar with Ruby on Rails. As promised, today we share the second...

Comments

olsi gjeciJuly 10, 2016 at 7:34 pm

HI. Im trying to follow the tutorial and at the end after implementing everything as you say, when i try to create a task i get this error: No route matches [POST] “/show/data/task1468164588503”
i think im doing everything excartly the same with the exception of home controller’s name which i named show controller.
here are my routes:
match “show/data”, :to => “show#data”, :as => “data”, :via => “get”