WiceGrid for Mongoid

Version: 6.0.0.pre1
Author: Yuri Leikind
Contributor: Xavier Defrang, Aleksandr Furmanov
Homepage: leikind.org/pages/wicegrid
Examples online: grid.leikind.org
News: leikind.org/wicegrid
Email: “Yuri Leikind” <yuri.leikind at gmail dot com>

Intro

afurmanov> The intention of this fork is to make WiseGrid compatible with Mongoid.

THIS IS AN EARLY ALPHA VERSION OF THE PLUGIN FOR RAILS 3.0. BASIC STUFF WORKS, BUT A LOT OF FUNCTIONALITIES ARE BROKEN. THE DOCUMENTATION BELOW CAN BE OUTDATED.

FOR RAILS 3.0 IT ONLY WORKS AS A GEM. AT THE SAME TIME NO OFFICIAL GEM IS YET RELEASED, SO IF YOU WANT TO TRY IT, CLONE THE REPOSITORY, PUT IT INTO vendor/wice_grid AND ADD THIS TO YOUR GEMFILE:

gem "wice_grid", '3.0.0.pre1', :path => 'vendor/wice_grid'

OR BUILD THE GEM.

WiceGrid is a Rails grid plugin.

One of the goals of this plugin was to allow the programmer to define the contents of the cell by himself, just like one does when rendering a collection via a simple table (and this is what differentiates WiceGrid from various scaffolding solutions), but automate implementation of filters, ordering, paginations, CSV export, and so on. Ruby blocks provide an elegant means for this.

WiceGrid builds the call to the ActiveRecord layer for you and creates a table view with the results of the call including:

paging
sortable columns
filtering by multiple columns
CSV export
saving queries

All working nicely together. Filters are added automatically according to the type of the underlying DB column. Filtering by more than one column at the same time is possible. More than one such grid can appear on a page, and manipulations with one grid do not have any impact on the other.

WiceGrid does not take a collection as an input, it works directly with ActiveRecord (with the help of will_paginate[http://github.com/mislav/will_paginate/wikis]).

WiceGrid does not use AJAX calls to reload itself, instead simple GET requests are used for this, nevertheless, all other page parameters are respected and preserved. WiceGrid views do not contain forms so you can include it in your own forms.

WiceGrid is known to work with Rails versions from 2.1.x to 2.3.9. WiceGrid with Rails versions older than 2.1 can still be functional depending on the functionalities used.

WiceGrid is known to work with MySQL and Postgres.

WiceGrid works with Prototype and jQuery (experimental).

WiceGrid is compliant with Ruby 1.9.1.

Examples

This tutorial is accompanied by a sample application with WiceGrid examples which you can browse online ( grid.leikind.org ), or just view the code ( github.com/leikind/wice_grid_examples ).

Requirements

Rails version 2.1.0 or newer.

will_paginate[http://github.com/mislav/will_paginate/wikis] version 2.3.15 or newer.

Prototype[http://www.prototypejs.org] version 1.5.1 or newer, or jQuery[http://jquery.com/].

How-To

Installation

Run the following command to install the plugin:

script/plugin install git://github.com/leikind/wice_grid.git

If your application is Prototype-based (default in Rails 2.x), run the following generator to copy all plugin assets:

./script/generate wice_grid_assets_prototype

For jQuery:

./script/generate wice_grid_assets_jquery

This will copy images, stylesheets, configuration file config/initializers/wice_grid_config.rb, and the correct version of javascript files.

Support for Prototype and jQuery

WiceGrid started as a plugin using the Prototype javascript framework. Support for jQuery was added for version 0.6. The plugin contains two versions of the main javascript file wice_grid.js, and depending on the generator run to install the assets (wice_grid_assets_prototype or wice_grid_assets_jquery) the correct file is copied into public/javascripts.

Some javascript code is also generated and injected into the HTML page. The value of constant Wice::Defaults::JS_FRAMEWORK in configuration file wice_grid_config.rb defines for which JS framework code should be generated. Generators wice_grid_assets_prototype and wice_grid_assets_jquery create a version of wice_grid_config.rb with the corresponding value of Wice::Defaults::JS_FRAMEWORK.

In the Prototype mode the plugin uses a forked version of Calendarview. It is bundled with the plugin and the generator task wice_grid_assets_prototype will install al necessary assets.

The jQuery version uses jQuery datepicker. Because this is part of the standard jQuery codebase, it is not bundled together with the plugin, and it is the responsibility of the programmer to include all necessary assets including localization files if the application is multilingual.

It is always possible to fall back to simple dropdown lists that the standard date/datetime Rails helpers use.

JQUERY DATEPICKER IS ONLY USED FOR DATE FILTERS AT THE MOMENT. DATETIME FILTERS FALL BACK TO THE DEFAULT RAILS DATE/DATETIME HELPERS.

Basics

The Prototype version of WiceGrid requires prototype.js and effects.js in order to function. The jQuery version of WiceGrid requires jquery.js and jquery-ui.js in order to function.

Thus, make sure you have <%=javascript_include_tag :defaults %> in your layout template.

To include WiceGrid javascript and stylesheet files to the page use helper include_wice_grid_assets :

<%= include_wice_grid_assets %>

The default behavior of include_wice_grid_assets is a bit magical in the sense that it produces no output if the page contains no grids, so don’t panic if you see no WiceGrid includes. If you prefer to always have WiceGrid stylesheet and javascript, use

<%= include_wice_grid_assets :load_on_demand => false %>

The simplest example of a WiceGrid for one simple DB table called ApplicationAccount is the following:

Controller:

@tasks_grid = initialize_grid(Task)

View:

<%= grid(@tasks_grid) do |g|

  g.column do |task|
    task.id
  end

  g.column  do |task|
    task.title
  end

  g.column do |task|
    task.description
  end

  g.column do |task|
    task.archived? ? 'Yes' : 'No'
  end

  g.column do |task|
    link_to('Edit', edit_task_path(task))
  end
end -%>

Code g.column do |task| ... end defines everything related to a column in the resulting view table including column names, sorting, filtering, the content of the column cells, etc. The return value of the block is the table cell content.

In the above view code five columns were defined, all without names, no sorting or filtering is available. Still, pagination becomes active if the number of all extracted records exceeds the default number of rows per page.

Column names are defined with parameter :column_name:

<%= grid(@tasks_grid) do |g|

  g.column :column_name => 'ID' do |task|
    task.id
  end

  g.column :column_name => 'Title'  do |task|
    task.title
  end

  g.column  :column_name => 'Description' do |task|
    task.description
  end

  g.column  :column_name => 'Archived' do |task|
    task.archived? ? 'Yes' : 'No'
  end

  g.column   do |task|
    link_to('Edit', edit_task_path(task))
  end
end -%>

To add filtering and ordering, declare to which column in the underlying database table(s) the view column corresponds using parameter :attribute_name :

<%= grid(@tasks_grid) do |g|

  g.column :column_name => 'ID', :attribute_name => 'id' do |task|
    task.id
  end

  g.column :column_name => 'Title', :attribute_name => 'title'  do |task|
    task.title
  end

  g.column  :column_name => 'Description', :attribute_name => 'description' do |task|
    task.description
  end

  g.column  :column_name => 'Archived', :attribute_name => 'archived' do |task|
    task.archived? ? 'Yes' : 'No'
  end

  g.column   do |task|
    link_to('Edit', edit_task_path(task))
  end
end -%>

This will add sorting links and filters for columns Username and Active. The plugin automatically creates filters according to the type of the database column. In the above example a text field will be created for column Title (title is a string), for column Archived a dropdown filter will be created with options ‘Yes’, ‘No’, and ‘–’, and for the integer ID two short text fields are added which can contain the numeric range (more than, less than).

It is important to remember that :attribute_name is the name of the database column, not a model attribute. Of course, all database columns have corresponding model attributes, but not all model attributes map to columns in the same table with the same name.

Read more about available filters in the documentation for the column method. Read the section about custom dropdown filters for more advanced filters.

For columns like

g.column :column_name => 'Title', :attribute_name => 'title'  do |task|
  task.title
end

where the block contains just a call to the same attribute declared by :attribute_name, the block can be omitted:

<%= grid(@tasks_grid) do |g|

  g.column :column_name => 'ID', :attribute_name => 'id'

  g.column :column_name => 'Title', :attribute_name => 'title'

  g.column  :column_name => 'Description', :attribute_name => 'description'

  g.column  :column_name => 'Archived', :attribute_name => 'archived' do |task|
    task.archived? ? 'Yes' : 'No'
  end

  g.column   do |task|
    link_to('Edit', edit_task_path(task))
  end
end -%>

In this case attribute_name will be used as the method name to send to the ActiveRecord instance.

If only sorting is needed, we can turn off filters using :no_filter :

g.column :column_name => 'ID', :attribute_name => 'id', :no_filter => true

If no ordering links are needed, use :allow_ordering:

g.column :column_name => 'Added', :attribute_name => 'created_at', :allow_ordering => false

It is important to understand that it is up to the developer to make sure that the value returned by a column block (the content of a cell) corresponds to the underlying database column specified by :attribute_name (and :model_class discussed below).

Rendering filter panel

The filter panel can be shown and hidden clicking the icon with binoculars.

The way the filter panel is shown after the page is loaded is controlled via parameter :show_filters of the grid helper. Possible values are:

:when_filtered - the filter is shown when the current table is the result of filtering
:always - show the filter always
:no - never show the filter

Example:

<%= grid(@tasks_grid, :show_filters => :always) do |g|
  ......
end -%>

Filter related icons (filter icon, reset icon, show/hide icon) are placed in the header of the last column if it doesn’t have any filter or a column name, otherwise an additional table column is added. To always place the icons in the additional column, set Wice::Defaults::REUSE_LAST_COLUMN_FOR_FILTER_ICONS to false in the configuration file.

Initial Ordering

Initializing the grid we can also define the column by which the record will be ordered on the first rendering of the grid, when the user has not set their ordering setting by clicking the column label, and the order direction:

@tasks_grid = initialize_grid(Task,
  :order => 'tasks.title',
  :order_direction => 'desc'
)

Records Per Page

The number of rows per page is set with :per_page:

@tasks_grid = initialize_grid(Task, :per_page => 40)

Conditions

The initialize_grid method supports a :conditions parameter which is passed on to the underlying ActiveRecord (via will_paginate), so it can be in any format processable by ActiveRecord:

@tasks_grid = initialize_grid(Task,
  :conditions => ["archived = false and estimated_time > ?", 100]
)

@tasks_grid = initialize_grid(Task,
  :include => :project,
  :conditions => {:archived => false, :project => {:active => true}}
)

A good example is substituting a common pattern like

@user_groups = @portal_application.user_groups

with WiceGrid code:

@user_groups_grid = initialize_grid(UserGroup, :conditions => ['portal_application_id = ?', @portal_application])

Queries with join tables

WiceGrid also supports ActiveRecord’s :joins and :include.

@products_grid = initialize_grid(Product,
  :include => :category,
  :order => 'products.name',
  :per_page => 20)

Note that if we want to order initially by a column from a joined table we have to specify the table and the column name with the sql dot notation, that is, products.name

To show columns of joined tables in the view table, the ActiveRecord model class name has to be specified, that corresponds to the joined table:

<%= grid(@products_grid) do |g|
  g.column :column_name => 'Product Name', :attribute_name => 'name' do |product|  # primary table
    link_to(product.name, product_path(product))
  end

  g.column :column_name => 'Category', :attribute_name => 'name', :model_class => Category |product| # joined table
    product.category.name
  end
%>

Please note that the blockless definition of the column only works with columns from the main table and it won’t work with columns with :model_class

Joined associations referring to the same table

In case there are two joined associations both referring to the same table, ActiveRecord constructs a query where the second join provides an alias for the joined table. To enable WiceGrid to order and filter by columns belonging to different associations but originating from the same table, set :table_alias to this alias:

Model:

class Project < ActiveRecord::Base
  belongs_to :customer, :class_name => 'Company'
  belongs_to :supplier, :class_name => 'Company'
end

Controller:

@projects_grid = initialize_grid(Project, :include => [:customer, :supplier] )

View:

<%= grid(@projects_grid, :show_filters => :always) do |g|

  g.column :column_name => 'Project Name', :attribute_name => 'name'

  g.column  :column_name => 'Customer company', :model_class => 'Company', :attribute_name => 'name' do |task|
    task.customer.name if task.customer
  end

  g.column  :column_name => 'Supplier company', :model_class => 'Company', :attribute_name => 'name', :table_alias => ' suppliers_projects' do |task|
    task.supplier.name if task.supplier
  end

end -%>

More than one grid on a page

It is possible to use more that one grid on a page, each with its own state. To do so, you must specify the name of the grid in initialize_grid using parameter :name

The name serves as the base name for HTTP parameters, DOM IDs, etc, so it is important that all grids on a page have different names. The default name is ‘grid’.

The name can only contain alphanumeric characters.

@projects_grid = initialize_grid(Project, :name => 'g1' )
@tasks_grid = initialize_grid(Task, :name => 'g2')

Custom Ordering

It is possible to change the way results are ordered injecting a piece of SQL code, for example, use ORDER BY INET_ATON(ip_address) instead of ORDER BY ip_address.

To do so, provide parameter :custom_order in the initialization of the grid with a hash where keys are fully qualified names of database columns, and values the required chunks of SQL to use in the ORDER BY clause.

For example:

@hosts_grid = initialize_grid(Host,
  :custom_order => {
    'hosts.ip_address' => 'INET_ATON(hosts.ip_address)'
  })

It is possible to use the ‘?’ character instead of the name of the column in the hash value:

@hosts_grid = initialize_grid(Host,
  :custom_order => {
    'hosts.ip_address' => 'INET_ATON( ? )'
  })

Values can also be Proc objects. The parameter supplied to such a Proc object is the name of the column:

@hosts_grid = initialize_grid(Host,
  :custom_order => {
    'hosts.ip_address' => lambda{|f| "INET_ATON( #{f} )"}
  })

It is possible to construct custom dropdown filters. Depending on the value of column parameter:custom_filter different modes are available:

Array of two-element arrays or a hash

An array of two-element arrays or a hash are semantically identical ways of creating a custom filter.

Every first item of the two-element array is used for the label of the select option while the second element is the value of the select option. In case of a hash the keys become the labels of the generated dropdown list, while the values will be values of options of the dropdown list:

g.column :column_name => 'Status', :attribute_name => 'status',
         :custom_filter => {'Development' => 'development', 'Testing' => 'testing', 'Production' => 'production'}

g.column :column_name => 'Status', :attribute_name => 'status',
        :custom_filter => [['Development', 'development'], ['Testing', 'testing'], ['Production', 'production']]

It is also possible to submit a array of strings or numbers, in this case every item will be used both as the value of the select option and as its label:

g.column :column_name => 'Status', :attribute_name => 'status',
         :custom_filter => ['development', 'testing', 'production']

:auto

:auto - a powerful option which populates the dropdown list with all unique values of the column specified by :attribute_name and :model_class.

g.column :column_name => 'Status', :attribute_name => 'status',
         :custom_filter => ['development', 'testing', 'production']

Note that in the above example all names of all possible categories will appear even if they don’t appear in the current resultset. To only show those which do appear in the resutset, use an array of symbol messages (see section ‘An array of symbols’).

Custom filters and associations (joined tables)

In most cases custom fields are required for one-to-many and many-to-many associations.

To correctly build a filter condition foreign keys have to be matched.

For example, if there is a column:

g.column :column_name => 'Project Name', :attribute_name => 'name', :model_class => 'Project' do |task|
  task.project.name if task.project
end

adding :custom_filter like this:

g.column :column_name => 'Project Name', :attribute_name => 'name', :model_class => 'Project',
         :custom_filter => Project.find(:all).map{|pr| [pr.name, pr.name]} do |task|
  task.project.name if task.project
end

is bad style and can fail, because the resulting condition will compare the name of the project, projects.name to a string, and in some databases it is possible that different records (projects in our example) have the same name.

To use filter with foreign keys, we have to change the declaration of the column from projects.name, to tasks.project_id, and build the dropdown with foreign keys as values:

g.column :column_name => 'Project Name', :attribute_name => 'tasks.project_id',
         :custom_filter => Project.find(:all).map{|pr| [pr.id, pr.name]} do |task|
  task.project.name if task.project
end

However, this will break the ordering of the column - the column will be ordered by the integer foreign key. To fix this, we can override the ordering using :custom_order:

@tasks_grid = initialize_grid(Task,
  :include => :project,
  :custom_order => {
    'tasks.project_id' => 'projects.name'
  }
)

Any other symbol (method name) or an array of symbols (method names)

For one symbol (different from :auto) the dropdown list is populated by all unique values returned by the method with this name sent to all ActiveRecord objects throughout all pages.

The conditions set up by the user are ignored, that is, the records used are all those found on all pages without any filters active.

For an array of symbols, the first method name is sent to the ActiveRecord object if it responds to this method, the second method name is sent to the returned value unless it is nil, and so on. In other words, a single symbol mode is the same as an array of symbols where the array contains just one element.

g.column :column_name => 'Version', :attribute_name => 'expected_version_id', :custom_filter => [:expected_version, :to_option] do |task|
  task.expected_version.name if task.expected_version
end

There are two important differences from :auto:

The method does not have to be a field in the result set, it is just some value computed in the method after the database call and ActiveRecord instantiation.
Filtering by any option of such a custom filter will bring a non-empty list, unlike with :auto.

This mode has one major drawback - this mode requires an additional query without offset and limit clauses to instantiate all ActiveRecord objects, and performance-wise it brings all the advantages of pagination to nothing. Thus, memory- and performance-wise this can be really bad for some queries and tables and should be used with care.

If the final method returns a atomic value like a string or an integer, it is used for both the value and the label of the select option element:

<option value="returned value">returned value</option>

However, if the retuned value is a two element array, the first element is used for the option label and the second - for the value.

Typically, a model method like the following:

def to_option
  [name, id]
end

together with

:custom_filter => :to_option

would do the trick:

<option value="id">name</option>

Alternatively, a hash with the single key-value pair can be used, where the key will be used for the label, and the key - for the value:

def to_option
  {name => id}
end

Special treatment of values ‘null’ and ‘not null’

Values ‘null’ and ‘not null’ in a generated custom filter are treated specially, as SQL null statement and not as strings. Value ‘null’ is transformed into SQL condition IS NULL, and ‘not null’ into IS NOT NULL

Thus, if in a filter defined by

:custom_filter => {'No' => 'null', 'Yes' => 'not null', '1' => 1, '2' => '2', '3' => '3'}

values ‘1’, ‘2’ and ‘No’ are selected (in a multi-select mode), this will result in the following SQL:

( table.field IN ( '1', '2' ) OR table.field IS NULL )

Multiple selection

By default it is possible for any dropdown list to switch between single and multiple selection modes. To only allow single selection use :allow_multiple_selection:

g.column :column_name => 'Expected in version', :attribute_name => 'expected_version_id',
       :custom_filter => [:expected_version, :to_option], :allow_multiple_selection => false do |task|
  ...
end

Defaults

Default values like can be changed in config/initializers/wice_grid_config.rb, as well grid labels and paths to some images.

Submit/Reset buttons

View helper submit_grid_javascript returns javascript which applies current filters. View helper reset_grid_javascript returns javascript which resets the grid, clearing the state of filters. This allows to create your own Submit and Reset buttons anywhere on the page with the help of button_to_function:

<%= button_to_function "Submit", submit_grid_javascript(@grid) %>
<%= button_to_function "Reset",  reset_grid_javascript(@grid) %>

To complement this feature there are two parameters in the grid helper :hide_submit_button and :hide_reset_button which hide default buttons in the grid if set to true.

Auto-reloading filters

It is possible to configure a grid to reload itself once a filter has been changed. It works with all filter types including the JS calendar, the only exception is the standard Rails date/datetime filters.

Use option :auto_reload in the column definiton:

<%= grid(@tasks_grid, :show_filters => :always, :hide_submit_button => true) do |g|

  # String
  g.column :column_name => 'Title', :attribute_name => 'title', :auto_reload => true

  # Boolean
  g.column :column_name => 'Archived', :attribute_name => 'archived', :auto_reload => true

  # Custom (dropdown)
  g.column :column_name => 'Status', :attribute_name => 'status_id', :custom_filter => Status.to_dropdown, :auto_reload => true  do |task|
    task.status.name if task.status
  end

  # Datetime
  g.column :column_name => 'Added', :attribute_name => 'created_at', :auto_reload => true, :helper_style => :calendar do |task|
    task.created_at.to_s(:short)
  end

end -%>

To make this behavior default change constant AUTO_RELOAD in the configuration file.

Styling the grid

Predefined css classes used by the grid

td tags are assigned two styles automatically - sorted if the column is the one by which the grid is ordered, and active_filter if the column’s filter is on.

Odd and even tr tags are assigned styles odd and even, correspondingly.

For other classes see wice_grid.css. Feel free to customize it according to your needs.

Adding classes and styles

The grid helper accepts parameter :table_html_attrs which is a hash of HTML attributes for the table tag.

Another grid parameter is header_tr_html_attrs which is a hash of HTML attributes to be added to the first tr tag (or two first tr‘s if the filter row is present).

:td_html_attrs is a parameter for the column method setting HTML attributes of td tags for a certain column.

Adding classes and styles dynamically

WiceGrid offers ways to dynamically add classes and styles to TR and TD based on the current ActiveRecord instance.

For <TD>, let the column return an array where the first item is the usual string output whole the second is a hash of HTML attributes to be added for the <td> tag of the current cell:

g.column  do |portal_application|
  css_class = portal_application.public? ? 'public' : 'private'
  [portal_application.name, {:class => css_class}]
end

For adding classes/styles to <TR> use special clause row_attributes , similar to column, only returning a hash:

<%= grid(@versions_grid) do |g|
  g.row_attributes do |version|
    if version.in_production?
      {:style => 'background-color: rgb(255, 255, 204);'}
    end
  end

  g.column{|version| ... }
  g.column{|version| ... }
end  -%>

Naturally, there can be only one row_attributes definition for a WiceGrid instance.

Various classes do not overwrite each other, instead, they are concatenated.

WiceGrid icons are in directory public/images/icons/grid/.

Adding rows to the grid

It is possible to add your own handcrafted HTML after and/or before each grid row. This works similar to row_attributes, by adding blocks after_row and before_row:

<%= grid(@tasks_grid) do |g|
  g.before_row do |task|
    if task.active?
      "<tr><td colspan=\"10\">Custom line for #{t.name}</td></tr>"  # this would add a row
                                                                    # before every active task row
    else
      nil
    end
  end
  .......
end %>

It is up for the developer to return the correct HTML code, or return nil if no row is needed for this record. Naturally, there is only one before_row definition and one after_row definition for a WiceGrid instance.

A real life example might be some enterprisy tables inside a table.

Rendering a grid without records

If the grid does not contain any records to show, it is possible show some alternative view instead of an empty grid. Bear in mind that if the user sets up the filters in such a way that the selection of records is empty, this will still render the grid and it will be possible to reset the grid clicking on the Reset button. Thus, this only works if the initial number of records is 0.

<%= grid(@grid) do |g|

  g.blank_slate  do
    "There are no records"
  end

  g.column  do |product|
     ...
  end
 end  -%>

There are two alternative ways to do the same, submitting a string to blank_slate:

g.blank_slate "some text to be rendered"

Or a partial:

g.blank_slate :partial => "partial_name"

Localization

Versions of WiceGrid newer than version 0.5 support localization via Rails I18n, however, without breaking compatibility with pre-I18n versions of Rails (2.1.0 and older).

Running

./script/generate wice_grid_assets

will copy file wice_grid.yml to config/locales.

The current locale is taken from I18n.locale. The locale also propagates to the javascript calendar widget (see Calendar.messagebundle in calendarview.js to add languages).

If the messages are not found, or I18n is missing, WiceGrid will fall back to the hardcoded messages in config/initializers/wice_grid_config.rb.

Currently supported languages are English, Dutch, French, and Russian.

ERB mode

The view helper can function in two different modes. These are defined by its erb_mode parameter. By default (:erb_mode => false) the view helper is a simple helper surrounded by <%= and %>, like in all examples above.

The second mode (:erb_mode => true) is called ERB mode and it allows to embed any ERB content inside blocks, which is basically the style of the form_for helper, only form_for takes one block, while inside the grid block there are other method calls taking blocks as parameters:

<% grid(@countries_grid, :erb_mode => true) do |g| %>

  <% g.column :column_name => 'Name', :attribute_name => 'name' do |country| %>
    <b>Name: <%= link_to(country.name, country_path(country)) %></b>
  <% end %>

  <% g.column :column_name => 'Numeric Code', :attribute_name => 'numeric_code' do |country| %>
    <i>Numeric Code: <%= country.numeric_code %></i>
  <% end %>

<% end -%>

This mode can be usable if you like to have much HTML code inside cells.

Please remember that in this mode the helper opens with <% instead of <%=, similar to form_for.

The default value for :show_filters can be changed in config/initializers/wice_grid_config.rb.

Action Column

It is easy to add a column with checkboxes for each record. This is useful for actions with multiple records, for example, deleting selected records. Please note that action_column only creates the checkboxes and the ‘Select All’ and ‘Deselect All’ buttons, and the form itself as well as processing the parameters should be taken care of by the application code.

<%= grid(@tasks_grid, :show_filters => :always) do |g|

  ...

  g.action_column

  ...

end -%>

By default the name of the HTTP parameter follows pattern "#{grid_name}[#{param_name}][]", thus params[grid_name][param_name] will contain an array of object IDs.

See the documentation for more details.

Integration of the grid with other forms on page

Imagine that the user should be able to change the behavior of the grid using some other control on the page, and not a grid filter.

For example, on a page showing tasks, change between ‘Show active tasks’ to ‘Show archived tasks’ using a dropdown box. WiceGrid allows to keep the status of the grid with all the filtering and sorting using helper dump_filter_parameters_as_hidden_fields which takes a grid object and dumps all current sorting and filtering parameters as hidden fields. Just include dump_filter_parameters_as_hidden_fields(@grid) inside your form, and the newly rendered grid will keep ordering and filtering.

<% form_tag('', :method => :get) do %>
  <%= dump_filter_parameters_as_hidden_fields(@tasks_grid) %>
  <%= select_tag 'archived',
     options_for_select([['View active tasks', 0], ['View archived tasks', 1]], @archived ? 1 : 0),
    :onchange => 'this.form.submit()' %>
<% end -%>

Javascript Calendar for Date and DateTime Filters.

Standard Rails Date and DateTime helpers are a set of dropdown lists, and while this is practical, displaying two Date or especially DateTime helpers takes too much space on a page and is in general confusing.

To solve this, WiceGrid includes a second variant of Date/DateTime filters based on a Javascript calendar.

In the Prototype mode the plugin uses a forked version of Calendarview. It is bundled with the plugin and the generator task wice_grid_assets_prototype will install al necessary assets.

It is always possible to fall back to simple dropdown lists that the standard date/datetime Rails helpers use.

JQUERY DATEPICKER IS ONLY USED FOR DATE FILTERS AT THE MOMENT. DATETIME FILTERS FALL BACK TO THE DEFAULT RAILS DATE/DATETIME HELPERS.

Calendar based helpers are enabled by default, but it’s possible to change it in config/initializers/wice_grid_config.rb, variable HELPER_STYLE.

The flavor of the date filter can also be changed on per-column basis:

g.column :column_name => 'Due Date', :attribute_name => 'due_date', :helper_style => :calendar do |task|
  task.due_date.to_s(:short) if task.due_date
end

g.column :column_name => 'Updated', :attribute_name => 'updated_at', :helper_style => :standard do |task|
  task.created_at.to_s(:short)
end

Constants DATE_FORMAT and DATETIME_FORMAT define the format of dates the user will see, as well as the format of the string sent in a HTTP parameter.

You can change the constants in config/initializers/wice_grid_config.rb. Doing so, make sure that lamdbas defined in DATETIME_PARSER and DATE_PARSER return valid DateTime and Date objects. The format by default is %Y-%m-%d for the Date and the date part of DateTime, and Time.zone.parse and Date.parse handle it. Make sure it stays so.

jQuery datepicker uses a different format flavor, therefore there is an additional constant DATE_FORMAT_JQUERY. While DATE_FORMAT_JQUERY is fed to datepicker, DATE_FORMAT is still used for presenting initial date values in filters, so make sure that DATE_FORMAT_JQUERY and DATE_FORMAT result in an identical date representation.

Show All Records

It is possible to switch to the All Records mode clicking on link “show all” in the bottom right corner. This functionality should be used with care. To turn this mode off for all grid instances, change constant ALLOW_SHOWING_ALL_QUERIES in config/initializers/wice_grid_config.rb to false. To do so for a specific grid, use initializer parameter :allow_showing_all_records.

Configuration constant START_SHOWING_WARNING_FROM sets the threshold number of all records after which clicking on the link results in a javascript confirmation dialog.

CSV Export

It is possible to export the data displayed on a grid to a CSV file. The dumped data is the current resultset with all the current filters and sorting applied, only without the pagination constraint (i.e. all pages).

To enable CSV export add parameters enable_export_to_csv and csv_file_name to the initialization of the grid:

@projects_grid = initialize_grid(Project,
  :include => [:customer, :supplier],
  :name => 'g2',
  :enable_export_to_csv => true,
  :csv_file_name => 'projects'
)

csv_file_name is the name of the downloaded file. This parameter is optional, if it is missing, the name of the grid is used instead. The export icon will appear at the bottom right corner of the grid.

Next, each grid view helper should be placed in a partial of its own, requiring it from the master template for the usual flow. There must be no HTML or ERB code in this partial except for the grid helper.

By convention the name of such a partial follows the following pattern:

_GRID_NAME_grid.html.erb

In other words, a grid named tasks is expected to be found in a template called _tasks_grid.html.erb (remember that the default name of grids is ‘grid’.)

Next, method export_grid_if_requested should be added to the end of each action containing grids with enabled CSV export.

export_grid_if_requested intercepts CSV export requests and evaluates the partial with the required grid helper.

The naming convention for grid partials can be easily overridden by supplying a hash parameter to export_grid_if_requested where each key is the name of a grid, and the value is the name of the template (like it is specified for render, i.e. without ‘_’ and extensions):

export_grid_if_requested('g1' => 'tasks_grid', 'g2' => 'projects_grid')

If the request is not a CSV export request, export_grid_if_requested does nothing and returns false, if it is a CSV export request, the method returns true.

If the action has no explicit render call, it’s OK to just place export_grid_if_requested as the last line of the action:

def index

  @tasks_grid = initialize_grid(Task,
    :name => 'g1',
    :enable_export_to_csv => true,
    :csv_file_name => 'tasks'
  )

  @projects_grid = initialize_grid(Project,
    :name => 'g2',
    :enable_export_to_csv => true,
    :csv_file_name => 'projects'
  )

  export_grid_if_requested
end

Otherwise, to avoid double rendering, use the return value of the method to conditionally call your render :

def index

  ...........

  export_grid_if_requested || render(:action => 'my_template')
end

It’s also possible to supply a block which will be called if no CSV export is requested:

def index

  ...........

  export_grid_if_requested do
     render(:action => 'my_template')
  end
end

If a column has to be excluded from the CSV export, set column parameter in_csv to false:

g.column  :in_csv => false do |task|
  link_to('Edit', edit_task_path(task))
end

If a column must appear both in HTML and CSV, but with different output, duplicate the column and use parameters in_csv and in_html to include one of them to html output only, the other to CSV only:

# html version
g.column :column_name => 'Title', :attribute_name => 'title', :in_csv => false do |task|
  link_to('Edit', edit_task_path(task.title))
end
# plain text version
g.column :column_name => 'Title', :in_html => false do |task|
  task.title
end

The default field separator in generated CSV is a comma, but it’s possible to override this submitting a string to the :enable_export_to_csv parameter:

@products_grid = initialize_grid(Product,
  :enable_export_to_csv => ';',
  :csv_file_name => 'products')

Detached Filters

It is possible to detach filters and place them anywhere on the page. To do so, use parameter :detach_with_id for a column whose filter needs to be detached, with an arbitrary string or a symbol value which will be used later to identify the filter. As soon as there is one column with :detach_with_id, the behavior of the grid helper changes - it becomes an initializer of the grid and doesn’t output any HTML code. To render the grid, use grid for the second time without the block. To render a detached output filter, use helper grid_filter(grid_object, detached_filter_key):

<%= grid(@tasks_grid, :show_filters => :always) do |g|

g.column :column_name => 'Title', :attribute_name => 'title', :detach_with_id => :title_filter do |task|
  link_to('Edit', edit_task_path(task.title))
end

g.column  :column_name => 'Archived', :attribute_name => 'archived', :detach_with_id => :archived_filter do |task|
  task.archived? ? 'Yes' : 'No'
end

g.column :column_name => 'Added', :attribute_name => 'created_at', :detach_with_id => :created_at_filter do |task|
  task.created_at.to_s(:short)
end

end -%>

<% # rendering filter with key :title_filter %>
<%= grid_filter @tasks_grid, :title_filter  %>

<% # rendering filter with key :archived_filter %>
<%= grid_filter @tasks_grid, :archived_filter  %>

<% # rendering filter with key :created_at_filter %>
<%= grid_filter @tasks_grid, :created_at_filter  %>

<% # Rendering the grid body %>
<%= grid(@tasks_grid) %>

It is important that the grid initializer goes first, the order of grid_filter and the second call to grid is of no importance.

Using custom submit and reset buttons together with :hide_submit_button => true and :hide_reset_button => true allows to completely get rid of the default filter row and the default icons (see section ‘Submit/Reset Buttons’).

For CSV export will continue functioning, just make sure the first call to grid is still in the template of its own and is inside of <%= %>, because when CSV is requested, the first grid works in the old fashioned way producing CSV formatted output.

This feature also works with :erb_mode => true.

If a column was declared with :detach_with_id, but never output with grid_filter, filtering the grid in development mode will result in an warning javascript message and the missing filter will be ignored. There is no such message in production.

grid parameter :show_filter must not be set to :no for detached filters to work.

How Does It Work? (For the interested)

When there is at least one column with :detach_with_id, the generated HTML code is stored in a buffer, code for detached filters is stored in buffers of their own identified by the given IDs, and nothing is returned to the view. When the helper is called for the second time, the buffer outputs its content. In a similar fashion, the grid_filter helper outputs buffers for filters.

Compatibility with Rails Asset Caching

Helpers names_of_wice_grid_stylesheets and names_of_wice_grid_javascripts return names of stylesheet and javascript files and can be used with stylesheet_link_tag and javascript_include_tag with :cache => true. Using this trick you have to deal with the parameters correctly, mind that Prototype has to be loaded before WiceGrid javascripts:

<%= stylesheet_link_tag *(['core',  'modalbox'] + names_of_wice_grid_stylesheets + [ {:cache => true}]) %>
<%= javascript_include_tag *([:defaults] + names_of_wice_grid_javascripts + [ 'ui', 'swfobject', {:cache => true}]) %>

Access to Records From Outside The Grid

There are two ways you can access the records outside the grid - using methods of the WiceGrid object and using callbacks.

Accessing Records Via The WiceGrid Object

Method current_page_records returns exactly the same list of objects displayed on page:

<%= grid(@tasks_grid) do |g|
  ...
end -%>

<p>
  IDs of records on the current page:
  <%= @tasks_grid.current_page_records.map(&:id).to_sentence %>
</p>

Method all_pages_records returns a list of objects browsable through all pages with the current filters:

<%= grid(@tasks_grid) do |g|
  ...
end -%>

<p>
  IDs of all records:
  <%= @tasks_grid.all_pages_records.map(&:id).to_sentence %>
</p>

Mind that this helper results in an additional SQL query.

Because of the current implementation of WiceGrid these helpers work only after the declaration of the grid in the view. This is due to the lazy nature of WiceGrid - the actual call to the database is made during the execution of the grid helper, because to build the correct query columns declarations are required.

Accessing Records Via Callbacks

It is possible to set up callbacks which are executed from within the plugin just after the call to the database. The callbacks are called before rendering the grid cells, so the results of this processing can be used in the grid. There are 3 ways you can set up such callbacks:

Via a lambda object:

def index
  @tasks_grid = initialize_grid(Task,
    :with_paginated_resultset => lambda do |records|
      ...
    end
  )
end

Via a symbol which is the name of a controller method:

def index
  @tasks_grid = initialize_grid(Task,
    :with_paginated_resultset => :process_selection
  )
end

def process_selection(records)
  ...
end

Via a separate block:

def index
  @tasks_grid = initialize_grid(Task)

  @tasks_grid.with_paginated_resultset do |records|
    ...
  end
end

There are two callbacks:

:with_paginated_resultset - used to process records of the current page
:with_resultset - used to process all records browsable through all pages with the current filters

While the :with_paginated_resultset callback just receives the list of records, :with_resultset receives a lambda object which, when called, returns the list of all records:

def index
  @tasks_grid = initialize_grid(Task)

  @tasks_grid.with_resultset do |wrapper|
    all_records = wrapper.call
    ...
  end
end

This lazy nature exists for performance reasons. Reading all records leads to an additional call, and there can be cases when processing all records should be triggered only under certain circumstances:

def index
  @tasks_grid = initialize_grid(Task)

  @tasks_grid.with_resultset do |wrapper|
    if params[:process_all_records]
      all_records = wrapper.call
      ...
    end
  end
end

Icons

Icons used by the plugin are courtesy of Mark James, the creator of the SILK icon set - www.famfamfam.com/lab/icons/silk/.