Ruby on Rails and More..: dhtmlx

Earlier I wrote about using a simple dhtmlx data grid in rails 3. The column type was text box which where editable. As I explored it more I found other column types which can be used with datagrid.

Calendar as column type
To use calendar as column type you have to add some of the js and css. These files can be easily downloaded from the dhtmlx website. Download the zip file and copy the below js and css inside your assests javascript and stylesheets folder.

Javascript files:
dhtmlxgrid/codebase/excell/dhtmlxgrid_excell_dhxcalendar.js
dhtmlxgrid/codebasedhtmlxcommon.js
dhtmlxgrid/codebase/calendar/dhtmlxcalendar.js

CSS files:
dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css
dhtmlxgrid/codebase/calendar/dhtmlxcalendar.css

Now while initializating the datagrid specify the coltype as dhxCalendar

var grid = new dhtmlXGridObject("grid_here");

grid.setImagePath("");

grid.setHeader("Name, Amount");

grid.setColSorting("str,str");

grid.setInitWidths("150,150");

grid.setSkin("dhx_skyblue");

grid.setColTypes("dhxCalendar,ed");

grid.init();

grid.load("/decoration/data?decoration="+deco);

dp = new dataProcessor("/decoration/dbaction?decoration="+deco);

dp.init(grid);

Note:- If you get some error like undefined coltype or somthing. This means that you have not included the correct js. Please check again for all the js files.

Combo box/list box/select box as column type

Specify the setColTypes as "co" if you want to add more options while editing datagrid or else specify "coro" to make it read only.

To add default options to the combo box do the following

var grid = new dhtmlXGridObject("grid_here");

grid.setImagePath("");
grid.setHeader("Select number");

grid.enableMultiselect(true)
grid.enableLightMouseNavigation(true);
grid.setInitWidths("100")
grid.setSkin("dhx_skyblue");
grid.enableAutoHeight(true);
grid.enableMultiline(true);

grid.setColTypes("coro");

var combo1 = grid.getCombo(1); //Here 1 is the id of the column

combo1.put(0,"zero"); // the first data is the value and the second is the data displayed in the dropdown
combo1.put(2,"two");

grid.init();

grid.load("/visit/data?visit="+deco);
dp = new dataProcessor("/visit/dbaction?visit="+deco);
dp.init(grid);

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..

Monday, 4 February 2013

Using Dhtmlx datagrid in rails 3 with calendar and combo box (select box)as column type

Wednesday, 23 January 2013

Data grid for rails 3 !!

About Me

Labels