{"id":3255,"date":"2016-03-23T16:00:23","date_gmt":"2016-03-23T12:00:23","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=3255"},"modified":"2025-05-19T14:45:55","modified_gmt":"2025-05-19T11:45:55","slug":"using-dhtmlxgantt-with-ruby-on-rails","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlxgantt-with-ruby-on-rails\/","title":{"rendered":"Using dhtmlxGantt with Ruby on Rails [Tutorial]"},"content":{"rendered":"

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<\/a> that describes how you can use our dhtmlxGantt<\/a> along with the Laravel framework<\/a>.<\/p>\n

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<\/a>.<\/p>\n

\"download<\/a><\/p>\n

<\/p>\n

Creating a New Project<\/h3>\n

<\/br>
\nIf you don’t have Ruby<\/a> on Rails installed, you can follow this installation guide<\/a>. 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.<\/p>\n

To do so, type in your terminal:<\/p>\n

rails new<\/span> path\/<\/span>to\/<\/span>your\/<\/span>project<\/div><\/div>\n

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

Controllers and Routes<\/h3>\n


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

Let’s create a new controller named home. Besides the controller, we’ll create a new action named index.<\/p>\n

cd path\/<\/span>to\/<\/span>your\/<\/span>project
\nrails generate controller home index<\/div><\/div>\n

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

get 'home\/index'<\/span><\/div><\/div>\n

Then, replace it with this code:<\/p>\n

root :to<\/span> =><\/span> 'home#index'<\/span><\/div><\/div>\n

Now we can test our server. Run in your terminal:<\/p>\n

rails server<\/div><\/div>\n

Open in your browser http:\/\/localhost:3000\/<\/em>, and you’ll get this result:<\/p>\n

\"run<\/p>\n

Doesn’t look so impressive at this step, but everything works fine which is a good sign.<\/p>\n

Let’s proceed with the views.<\/p>\n

Unpacking dhtmlxGantt and Creating the Views<\/h3>\n

<\/br>
\nA view’s<\/strong> 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<\/a>.<\/p>\n

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

1. Unpack the file codebase\/dhtmlxgantt.js<\/em> and the directory codebase\/ext<\/em> from the package to the directory vendor\/assets\/javascripts\/<\/em> of your project
\n2. Unpack the file codebase\/dhtmlxgantt.css<\/em> and the directory codebase\/skins<\/em> from the package to the directory vendor\/assets\/stylesheets\/<\/em> of your project<\/p>\n

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

Rails.application<\/span>.config<\/span>.assets<\/span>.precompile<\/span> +<\/span>= %<\/span>w(<\/span> dhtmlxgantt.css<\/span> )<\/span>
\nRails.application<\/span>.config<\/span>.assets<\/span>.precompile<\/span> +<\/span>= %<\/span>w(<\/span> dhtmlxgantt.js<\/span> )<\/span><\/div><\/div>\n

Let’s now create a view. If there’s no controller-specific layout, Rails will use the app\/views\/layouts\/application.html.erb<\/em>. 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:<\/p>\n

<!DOCTYPE html><\/span>
\n<html<\/span>><\/span>
\n<head<\/span>><\/span>
\n    <title<\/span>><\/span>Gantt<\/<\/span>title<\/span>><\/span>
\n    <%=<\/span> stylesheet_link_tag    'application'<\/span>, media<\/span>: 'all'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>
\n    <%=<\/span> stylesheet_link_tag 'dhtmlxgantt'<\/span>, media<\/span>: 'all'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>
\n    <%=<\/span> javascript_include_tag 'application'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>  
\n    <%=<\/span> javascript_include_tag 'dhtmlxgantt'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>
\n    <%=<\/span> csrf_meta_tags %><\/span>
\n<\/<\/span>head<\/span>><\/span>
\n<body<\/span>><\/span>
\n
\n    <%=<\/span> yield %><\/span>
\n
\n<\/<\/span>body<\/span>><\/span>
\n<\/<\/span>html<\/span>><\/span><\/div><\/div>\n

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

<<\/span>div id=<\/span>"gantt_here"<\/span> style=<\/span>'width:100%; height:800px;'<\/span>><\/<\/span>div><\/span>
\n
\n<<\/span>script><\/span>
\n    gantt.init<\/span>(<\/span>"gantt_here"<\/span>)<\/span>;<\/span>
\n<\/<\/span>script><\/span><\/div><\/div>\n

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:<\/p>\n

\"gantt<\/p>\n

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.<\/p>\n

Creating the Models<\/h3>\n

<\/br>
\nOur application requires two models: one for the tasks and one for the links between them.<\/p>\n

Let’s create a model for the tasks first. Run in your terminal:<\/p>\n

rails generate model Task text:string start_date:datetime duration:integer progress:float sortorder:integer parent:integer<\/div><\/div>\n

As you noticed an ordinary task consists of its name, start date, duration, etc.<\/p>\n

Now we can create a second model. For the links this time:<\/p>\n

rails generate model Link source:integer target:integer link_type:string:limit1<\/div><\/div>\n

And, finally, we can create a new database:<\/p>\n

rake db:migrate<\/div><\/div>\n

Optionally, you can add some tasks and links to your database. Open the Rails console:<\/p>\n

rails c<\/div><\/div>\n

And then, add the new tasks and links. For example:<\/p>\n

Task.create<\/span> :text<\/span>=><\/span>"Task 1"<\/span>, :start_date<\/span>=><\/span>"2015-10-25"<\/span>,  :duration<\/span>=><\/span>2<\/span>;
\nTask.create<\/span> :text<\/span>=><\/span>"Task 2"<\/span>, :start_date<\/span>=><\/span>"2015-10-27"<\/span>,  :duration<\/span>=><\/span>3<\/span>;
\nLink.create<\/span> :source<\/span>=><\/span>1<\/span>, :target<\/span>=><\/span>2<\/span>, :link_type<\/span>=><\/span>"0"<\/span>;<\/div><\/div>\n

When you finish, just type exit to close the Rails console.<\/p>\n

Now we should add the code that allows us to save and load the data.<\/p>\n

Creating Controllers to Work with the Data<\/h3>\n

<\/br>
\nLet’s create a new action for loading the data. Open the app\/controllers\/home_controller.rb<\/em> file and add the following code that creates the data action:<\/p>\n

def<\/span> data
\n    tasks = Task.all<\/span>
\n    links = Link.all<\/span>
\n
\n    render<\/span> :json<\/span>=><\/span>{<\/span>
\n              :data<\/span> =><\/span> tasks.map<\/span>{<\/span>|<\/span>task|<\/span>{<\/span>
\n                          :id<\/span> =><\/span> task.id<\/span>,
\n                          :text<\/span> =><\/span> task.text<\/span>,
\n                          :start_date<\/span> =><\/span> task.start_date<\/span>.to_formatted_s<\/span>(<\/span>:db<\/span>)<\/span>,
\n                          :duration<\/span> =><\/span> task.duration<\/span>,
\n                          :progress<\/span> =><\/span> task.progress<\/span>,
\n                          :sortorder<\/span> =><\/span> task.sortorder<\/span>,
\n                          :parent<\/span> =><\/span> task.parent<\/span>
\n                      }<\/span>}<\/span>,
\n              :links<\/span> =><\/span> links.map<\/span>{<\/span>|<\/span>link|<\/span>{<\/span>
\n                  :id<\/span> =><\/span> link.id<\/span>,
\n                  :source<\/span> =><\/span> link.source<\/span>,
\n                  :target<\/span> =><\/span> link.target<\/span>,
\n                  :type<\/span> =><\/span> link.link_type<\/span>
\n              }<\/span>}<\/span>
\n           }<\/span>
\n  end<\/span><\/div><\/div>\n

Now we should create a new controller task:<\/p>\n

rails generate controller task<\/div><\/div>\n

And add new actions for adding, changing, and deleting the data. To do so, open the app\/controllers\/task_controller.rb<\/em> and add:<\/p>\n

protect_from_forgery
\n
\ndef<\/span> update<\/span>
\n    task = Task.find<\/span>(<\/span>params[<\/span>"id"<\/span>]<\/span>)<\/span>
\n    task.text<\/span> = params[<\/span>"text"<\/span>]<\/span>
\n    task.start_date<\/span> = params[<\/span>"start_date"<\/span>]<\/span>
\n    task.duration<\/span> = params[<\/span>"duration"<\/span>]<\/span>
\n    task.progress<\/span> = params[<\/span>"progress"<\/span>]<\/span>
\n    task.sortorder<\/span> = params[<\/span>"sortorder"<\/span>]<\/span>
\n    task.parent<\/span> = params[<\/span>"parent"<\/span>]<\/span>
\n    task.save<\/span>
\n
\n    render<\/span> :json<\/span> =><\/span> {<\/span>:status =><\/span> "ok"<\/span>}<\/span>
\n  end<\/span>
\n
\n  def<\/span> add<\/span>
\n    task = Task.create<\/span> :text<\/span> =><\/span> params[<\/span>"text"<\/span>]<\/span>, :start_date<\/span>=><\/span> params[<\/span>"start_date"<\/span>]<\/span>, :duration<\/span> =><\/span> params[<\/span>"duration"<\/span>]<\/span>,
\n                       :progress<\/span> =><\/span> params[<\/span>"progress"<\/span>]<\/span>, :sortorder<\/span> =><\/span> params[<\/span>"sortorder"<\/span>]<\/span>, :parent<\/span> =><\/span> params[<\/span>"parent"<\/span>]<\/span>
\n
\n    render<\/span> :json<\/span> =><\/span> {<\/span>:tid =><\/span> task.id<\/span>}<\/span>
\n  end<\/span>
\n
\n  def<\/span> delete<\/span>
\n    Task.find<\/span>(<\/span>params[<\/span>"id"<\/span>]<\/span>)<\/span>.destroy<\/span>
\n    render<\/span> :json<\/span> =><\/span> {<\/span>:status =><\/span> "ok"<\/span>}<\/span>
\n  end<\/span><\/div><\/div>\n

As you may have guessed, now it’s time to create the controller named link. Creating a new controller:<\/p>\n

rails generate controller link<\/div><\/div>\n

And don’t forget to add the code required for adding, changing, and deleting. Open the app\/controllers\/link_controller.rb<\/em> file and add:<\/p>\n

protect_from_forgery
\n
\n def<\/span> update<\/span>
\n   link = Link.find<\/span>(<\/span>params[<\/span>"id"<\/span>]<\/span>)<\/span>
\n   link.source<\/span> = params[<\/span>"source"<\/span>]<\/span>
\n   link.target<\/span> = params[<\/span>"target"<\/span>]<\/span>
\n   link.link_type<\/span> = params[<\/span>"type"<\/span>]<\/span>
\n   link.save<\/span>
\n
\n   render<\/span> :json<\/span> =><\/span> {<\/span>:status =><\/span> "ok"<\/span>}<\/span>
\n end<\/span>
\n
\n def<\/span> add<\/span>
\n   link = Link.create<\/span> :source<\/span> =><\/span> params[<\/span>"source"<\/span>]<\/span>, :target<\/span> =><\/span> params[<\/span>"target"<\/span>]<\/span>, :link_type<\/span> =><\/span> params[<\/span>"type"<\/span>]<\/span>
\n   render<\/span> :json<\/span> =><\/span> {<\/span>:tid =><\/span> link.id<\/span>}<\/span>
\n end<\/span>
\n
\n def<\/span> delete<\/span>
\n   Link.find<\/span>(<\/span>params[<\/span>"id"<\/span>]<\/span>)<\/span>.destroy<\/span>
\n   render<\/span> :json<\/span> =><\/span> {<\/span>:status =><\/span> "ok"<\/span>}<\/span>
\n end<\/span><\/div><\/div>\n

Now we need to define the routes to our new controllers and actions. Open the config\/routes.rb<\/em> file and add:<\/p>\n

match "home\/data"<\/span>, :to<\/span> =><\/span> "home#data"<\/span>, :as<\/span> =><\/span> "data"<\/span>, :via<\/span> =><\/span> "get"<\/span>
\n
\npost "home\/data\/task"<\/span>, :to<\/span> =><\/span> "task#add"<\/span>
\nput "home\/data\/task\/:id"<\/span>, :to<\/span> =><\/span> "task#update"<\/span>
\ndelete<\/span> "home\/data\/task\/:id"<\/span>, :to<\/span> =><\/span> "task#delete"<\/span>
\n
\npost "home\/data\/link"<\/span>, :to<\/span> =><\/span> "link#add"<\/span>
\nput "home\/data\/link\/:id"<\/span>, :to<\/span> =><\/span> "link#update"<\/span>
\ndelete<\/span> "home\/data\/link\/:id"<\/span>, :to<\/span> =><\/span> "link#delete"<\/span><\/div><\/div>\n

We’re almost there. One more step. Open the app\/views\/home\/index.html.erb<\/em> file and add the code that initializes the chart, loads, and saves the data. Insert it between the <script><\/script> tags:<\/p>\n

gantt.config<\/span>.xml_date<\/span>="%Y-%m-%d %H:%i"<\/span>;
\n
\ngantt.init<\/span>(<\/span>"gantt_here"<\/span>)<\/span>;
\ngantt.load<\/span>(<\/span>"<%= data_path %>"<\/span>)<\/span>;
\n
\nvar dp = new<\/span> dataProcessor(<\/span>"<%= data_path %>"<\/span>)<\/span>;
\ndp.init<\/span>(<\/span>gantt)<\/span>;
\ndp.setTransactionMode<\/span>(<\/span>"REST"<\/span>)<\/span>;<\/div><\/div>\n

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.<\/p>\n

\"gantt<\/p>\n

You can create new tasks and links and change them. The application will save the changes to the database.<\/p>\n

Hopefully, this article will be useful to you. Here you can also learn how to use dhtmlxScheduler with Ruby on Rails<\/a>. Do not forget to visit our blog from time to time. There will be more helpful tutorials for you.<\/p>\n","protected":false},"excerpt":{"rendered":"

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, …<\/p>\n","protected":false},"author":2,"featured_media":3804,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,20,14,60,36],"class_list":["post-3255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-gantt","tag-tips","tag-integrations-gantt","tag-ruby-on-rails"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3255"}],"version-history":[{"count":6,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3255\/revisions"}],"predecessor-version":[{"id":13922,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3255\/revisions\/13922"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3804"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}