Ruby on Rails and More..: Data grid for rails 3 !!

Recently in my project I was trying to use jqgrid or datagrid kind of thing . I selected datagrid and here is the procedure to use it.

Step 1: Generate a controller, say admin

Step 2: Generate a model , say user with three column suppose first_name,last_name,phone

Step 3: Run rake db:migrate

Step 4: Download the jquery from here datagrid. And copy only the dhtmlxcommon.js , dhtmlxdataprocessor.js, dhtmlxgrid.js and dhtmlxgridcell.js to your app/assests/javascript folder. For css copy the dhtmlxgrid.css and dhtmlxgrid_dhx_skyblue.css in your stylesheet folder.
Also copy the images to your images folder.

Step 5: In controller add an action called view like this :-

  class AdminController < ApplicationController
    def view
    end
end

Step 5: Add a view.html.erb with the following code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>

  <body>
  <div id="grid_here" style="width:600px; height:400px;">
  </div>
  <script type="text/javascript" charset="utf-8">
var grid = new dhtmlXGridObject("grid_here");
grid.setImagePath("/javascripts/codebase/imgs/");
grid.setHeader("First name, Last name, Phone");
grid.setInitWidths("100,100,*");
grid.setSkin("dhx_skyblue");
grid.init();
  </script>
  <input type="button" value="Add" onclick="grid.addRow(grid.uid(),'new user')">
  <input type="button" value="Delete" onclick="grid.deleteSelectedRows()">
  </body>
</html>

Step 6: Modify your routes.rb file to add this

resource :admin do
collection do
get 'view'
get 'data'
get 'dbaction'
end
end

If you go to your http://localhost:3000/admin/view you can now see the overall structure of the data grid.

To fill the data with the data grid do the following:

Step 7: Add a new action data in your admin controller

class AdminController < ApplicationController
  def view
  end
  def data
  @users = User.all()
  end
end

Step 8: Add the view part of that action in /app/views/admin/data.xml.builder

xml.instruct! :xml, :version=>"1.0"

xml.tag!("rows") do
@users.each do |user|
xml.tag!("row",{ "id" => user.id }) do
xml.tag!("cell", user.first_name)
xml.tag!("cell", user.last_name)
xml.tag!("cell", user.phone)
end
end
end

Step 9: Add one more line to your view code,

To save grid data do the following:-

Step 10: Add one more action dbaction to your controller-

class AdminController < ApplicationController
  def view
  end
  def data
  @users = User.all()
  end
  def dbaction
  #called for all db actions
first_name = params["c0"]
last_name = params["c1"]
phone = params["c2"]

  @mode = params["!nativeeditor_status"]

  @id = params["gr_id"]
  case @mode
  when "inserted"
user = User.new
user.first_name = first_name
user.last_name = last_name
user.phone = phone
user.save!

  @tid = user.id
  when "deleted"
user=User.find(@id)
user.destroy

  @tid = @id
  when "updated"
user=User.find(@id)
user.first_name = first_name
user.last_name = last_name
user.phone = phone
user.save!

  @tid = @id
  end
  end

end

Step 11: For this dbaction add the view part in  /app/views/admin/dbaction.xml.builder

xml.instruct! :xml, :version=>"1.0"

xml.tag!("data") do
xml.tag!("action",{ "type" => @mode, "sid" => @id, "tid" => @tid })
end

Step 12: Modify the view.html.erb file like this

  <script type="text/javascript" charset="utf-8">
var grid = new dhtmlXGridObject("grid_here");
grid.setImagePath("/javascripts/codebase/imgs/");
grid.setHeader("First name, Last name, Phone");
grid.setInitWidths("100,100,*");
grid.setSkin("dhx_skyblue");
grid.init();
grid.load("/admin/data");

dp = new dataProcessor("/admin/dbaction/");
dp.init(grid);
  </script>

Step 13: Go to http://localhost:3000/admin/view and now you can see the the data grid with add and delete functionality

Point to be noted:-

Make sure you change the path of the images in the css file so that images gets refelected in your view part.
This is just a basic example, more functionalty can be added if you refer to the documentaion of the datagrid

Ruby on Rails and More..

Wednesday 23 January 2013

Data grid for rails 3 !!

No comments:

Post a Comment

About Me

Labels