{"id":426,"date":"2010-07-05T19:32:59","date_gmt":"2010-07-05T15:32:59","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=426"},"modified":"2025-05-19T14:03:36","modified_gmt":"2025-05-19T11:03:36","slug":"editable-datagrid-for-ruby-on-rails-built-with-dhtmlxgrid","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/editable-datagrid-for-ruby-on-rails-built-with-dhtmlxgrid\/","title":{"rendered":"Editable Datagrid for Ruby on Rails Built with dhtmlxGrid"},"content":{"rendered":"

NOTE: This tutorial is for RoR 2. Check RoR 3<\/a> if you use it.<\/p>\n

We’ve also posted an updated tutorial for Ruby on Rails 4<\/a>.<\/strong><\/p>\n

This tutorial will show you how to display tabular data in Ruby on Rails with grid js<\/a> library, dhtmlxGrid Standard Edition, which is available under GNU GPL. At the end, we will have a datagrid with in-line editing, sorting, and filtering, which loads its data from the server and saves it back to the database using Ruby on Rails.<\/p>\n

To illustrate, we will create a table of users. This is a very common task for nearly any web application. Working with RoR, we could use scaffolds, but they don’t work so well for navigation on large sets of data. Besides, dhtmlxGrid has client-side editing and filtering functionality, which can greatly simplify things. This is how our final grid will look:<\/p>\n

\"dhtmlxGrid

dhtmlxGrid and RoR Example: Editable Ajax Grid<\/p><\/div>
\n<\/p>\n

Setting the Environment<\/strong><\/p>\n

To start, we create DB migration for a table of users. It will have 3 fields for storing First Name, Last Name and Phone Number. We will also create a couple of test records to see how the grid will look.<\/p>\n

ruby script\/<\/span>generate migration create_users
\n
\nclass<\/span> CreateUsers <<\/span> ActiveRecord::Migration<\/span>
\n  def<\/span> self<\/span>.up<\/span>
\n    create_table :users<\/span> do<\/span> |<\/span>t|<\/span>
\n            t.string<\/span> :first_name<\/span>
\n            t.string<\/span> :last_name<\/span>
\n            t.string<\/span> :phone<\/span>
\n           
\n      t.timestamps<\/span>
\n    end<\/span>
\n    User.create<\/span>(<\/span>
\n        :first_name<\/span> =><\/span> "John"<\/span>,
\n        :last_name<\/span> =><\/span> "Smit"<\/span>,
\n        :phone<\/span> =><\/span> "555 198 877"<\/span>)<\/span>
\n    User.create<\/span>(<\/span>
\n        :first_name<\/span> =><\/span> "Stanislav"<\/span>,
\n        :last_name<\/span> =><\/span> "Wolski"<\/span>,
\n        :phone<\/span> =><\/span> "456 456 454"<\/span>)<\/span>    
\n  end<\/span>
\n
\n  def<\/span> self<\/span>.down<\/span>
\n    drop_table :users<\/span>
\n  end<\/span>
\nend<\/span>
\n
\nrake db:migrate<\/div><\/div>\n

Additionally we need to create a model and controller for our demo:<\/p>\n

ruby script\/<\/span>generate model user
\nruby script\/<\/span>generate controller admin<\/div><\/div>\n

Now we are ready to start building the main part of the users table. <\/p>\n

Loading Empty Grid<\/strong><\/p>\n

As I said, on the client side we will be using dhtmlxGrid. <\/p>\n

When you download the grid package, unzip it and copy the dhtmlxGrid\/codebase and dhtmlxDataProcessor\/codebase folders to the \/public\/javascript\/ folder of your demo application. The dhtmlxGrid package contains lots of examples and supporting materials which are not needed in the application, so we are taking only the code we need.<\/p>\n

After that we can add our first action in \/app\/controllers\/admin_controller.rb<\/strong>:<\/p>\n

class<\/span> AdminController <<\/span> ApplicationController
\n    def<\/span> view
\n    end<\/span>
\nend<\/span><\/div><\/div>\n

We also create the first view – the file \/app\/views\/admin\/view.rhtml<\/strong>:<\/p>\n

<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"<\/span>
\n    "http:\/\/www.w3.org\/TR\/html4\/loose.dtd"><\/span>
\n<html<\/span>><\/span>
\n    <head<\/span>><\/span>
\n        <script<\/span> src<\/span>=<\/span>"\/javascripts\/codebase\/dhtmlxcommon.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n        <script<\/span> src<\/span>=<\/span>"\/javascripts\/codebase\/dhtmlxgrid.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n        <script<\/span> src<\/span>=<\/span>"\/javascripts\/codebase\/dhtmlxgridcell.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n       
\n        <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"\/javascripts\/codebase\/dhtmlxgrid.css"<\/span> type<\/span>=<\/span>"text\/css"<\/span> media<\/span>=<\/span>"screen"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n        <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"\/javascripts\/codebase\/skins\/dhtmlxgrid_dhx_skyblue.css"<\/span> type<\/span>=<\/span>"text\/css"<\/span> media<\/span>=<\/span>"screen"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n    <\/<\/span>head<\/span>><\/span>
\n    <body<\/span>><\/span>
\n        <div<\/span> id<\/span>=<\/span>"grid_here"<\/span> style<\/span>=<\/span>"width:600px; height:400px;"<\/span>><\/span>
\n        <\/<\/span>div<\/span>><\/span>
\n        <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n            var grid = new dhtmlXGridObject("grid_here");
\n            grid.setImagePath("\/javascripts\/codebase\/imgs\/");
\n            grid.setHeader("First name, Last name, Phone");
\n            grid.setInitWidths("100,100,*");
\n            grid.setSkin("dhx_skyblue");
\n            grid.init();
\n        <\/<\/span>script<\/span>><\/span>
\n        <input<\/span> type<\/span>=<\/span>"button"<\/span> value<\/span>=<\/span>"Add"<\/span> onclick<\/span>=<\/span>"grid.addRow(grid.uid(),'new user')"<\/span>><\/span>
\n        <input<\/span> type<\/span>=<\/span>"button"<\/span> value<\/span>=<\/span>"Delete"<\/span> onclick<\/span>=<\/span>"grid.deleteSelectedRows()"<\/span>><\/span>
\n    <\/<\/span>body<\/span>><\/span>
\n<\/<\/span>html<\/span>><\/span><\/div><\/div>\n

As you can see, this view doesn’t contain any active logic, it just loads js and css files and initializes JavaScript grid on the page. <\/p>\n

Some important points to note:<\/p>\n