Skip to main content

How to create a yahoo datatable in rails

To create a Yahoo Ajax Datatable (with local datasource) from a rails view, I had to do the following. First I had to add this helper method to the Application controller:

module ApplicationHelper

  #Outputs the javascript code necesary to create a yahoo datable 
  # from a plain datasource
  # column_array: and array of 2-item arrays in the form: 
  #               ["name_wihout_spaces", "Text to show in the column header"]
  # data_rows: an array or rows. Each row is an array that has the values in the 
  #            order specified in the column_array.
  def to_yahoo_array_data_source(column_array, data_rows, custom_div_id = "myContainer", 
custom_col_var_name = "data_cols",
      custom_datasource_var_name = "data_source")
   
    column_items = []
    column_array.each do |column|
      column_items << "{key:\"#{column[0]}\", label:\"#{column[1]}\", sortable:true}"
    end
    column_code = "var #{custom_col_var_name} = [#{column_items.join(',')}];"


    data_items = []
    data_rows.each do |row|
      data_for_row = []
      for col_idx in 0...column_array.size
        row[col_idx] = "\"#{escape_javascript(row[col_idx])}\"" unless row[col_idx].is_a?(Fixnum)
        data_for_row << "#{column_array[col_idx][0]}: #{row[col_idx]}"
      end
      data_items << "{#{data_for_row.join(',')}}"
    end
    record_set_code = "var #{custom_datasource_var_name} = new YAHOO.util.LocalDataSource([#{data_items.join(',')}]);"
    #    {key:"no", label:"No.", sortable:true},
    #    {key:"lname", label:"Last Name", sortable:true},
    #    {key:"age", label:"Age", sortable:true}
    #];
    return "#{column_code}\n #{record_set_code}\nvar myDataTable = new YAHOO.widget.DataTable(\"#{custom_div_id}\", #{custom_col_var_name}, #{custom_datasource_var_name});"
  end
end

Next I added the required javascript libraries to the application layout:

<html>

<head>
 <title>Email Detentions</title>

 <%= javascript_include_tag 'prototype' %>
 <!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>

<!-- OPTIONAL: JSON Utility (for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>

<!-- OPTIONAL: Connection Manager (enables XHR for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>

<!-- OPTIONAL: Get Utility (enables dynamic script nodes for DataSource) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js"></script>

<!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>

<!-- OPTIONAL: Calendar (enables calendar editors) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>

<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>

</head>
<body class="yui-skin-sam">

<%= @content_for_layout %>
</body>
</html>

And then I had to call the helper method from my view. This is an example (which by the way, it also shows how to implement the "click all" check box that select all check boxes when clicked):

<h1>Email Demerit Detention letters</h1>
<% form_tag({:controller => 'deans', :action => 'send_detention_demerits_letter'}, :id => 'students_selection') do -%>
  <br/>Please enter the detention date as it will appear in the email: <%= text_field(:email, :detention_date, :value => Time.now.next_week(day = :thursday).to_date.to_formatted_s(:long_ordinal) ) %>
  <%= hidden_field(:email, :beg_date, :value => @beg_date) %>

  <br/> Mark the checkbox of the students that should receive an email:
  <br/>
  <input id="check_all" name="check_all" type="checkbox" 
onclick="Form.getInputs('students_selection', 
'checkbox').each(function(box){box.checked = $('check_all').checked})" />
  Select All Students
  <br/>
  <div id="myContainer"></div>

  <%= submit_tag "Send emails"  %> <strong>(don't click twice, it may take some time to send all emails)</strong>

<% end -%>

<!-- Create the table -->
<script type="text/javascript">

<% column_array = [['no', "No."],['Name', "Name"],['Total_Demerits', "Total Demerits"],
  ['Credits', "Credits"],
  ['Balance', "Balance"]]; data_rows = []; std_idx = 1 %>
<% for student in @students_needing_detention %>

  <% std_name = student.Students_LastName + ", " + student.Students_FirstName %>
  <% data_rows << ["#{std_idx.to_s.rjust(3)} #{check_box_tag("students[#{std_idx}]", 
student.Students_StudentID, false)}" , std_name, 
student.tot_dems.to_s.rjust(5), student.tot_creds.to_s.rjust(5), student.diff.to_s.rjust(5)] %>
  <% std_idx = std_idx + 1 %>

<% end %>
<%= to_yahoo_array_data_source(column_array, data_rows) %>

</script>

Comments

Post a Comment

Popular posts from this blog

Mail labels and letter templates for jasperreports

The following are free (MIT license) mailing labels and letter templates for jasperreports that you can download and use in jasperserver and/or ireport: Update 3/15/2011 : I moved the Mail templates zip file here . Please consider making a small donation if the templates are of help to you, Thank you! If you need more information on how to use those templates please leave a comment in the blog.
14 comments
Read more

How to create online multiplayer HTML5 games in Contruct2

  Construct2 can use websockets to send and receive messages between games. By using socket-io , we can use a Node.js script as the server and my modification to the socket-io plugin for Construct2 to allow the games to synchronize data between them in real-time. There are two parts to this design: the Node.js server and the Construct2 clients (the games playing). The main part of building an online multiplayer HTML5 game is to plan: how the clients will communicate how often and what to communicate how much of the logic will go into the server and how much to the client. In my sample game, I chose to have each client own a player and have the server just relay messages: Use string messages in the form TypeOfMessage, Parameter1, Paremeter2, Parater3, etc to communicate. Have the clients send their player position about 16 times a second. Whenever their player shoots, the client needs to send a message immediately. Almost all of the game logic will...
9 comments
Read more

Send Email from C# using Outlook's COM late binding

The following sample code shows how to send emails from Outlook and Exchange using C#. This code works with any version of Outlook because it uses Late Binding to automate Outlook. Parts of the code where taken from other websites. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Reflection; using System.Threading; namespace LateBindingTest { class OutlookEmailerLateBinding { private object oApp; private object oNameSpace; private object oOutboxFolder; public OutlookEmailerLateBinding() { Type outlook_app_type; object[] parameter = new object[1]; //Get the excel object outlook_app_type = Type.GetTypeFromProgID("Outlook.Application"); //Create instance of excel oApp = Activator.CreateInstance(outlook_app_type); //Set the parameter which u want to set parameter[0] = "MAPI...
5 comments
Read more