Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Simple plug-in to easily create jqgrids using rails.

branch: master

Merge pull request #8 from anujjamwal/master

As the helper expects `records` to be a `WillPaginate::Collection`, I think there is no difference between using `first` and taking the first item using the index.

It's better to use the use the index though, in order to avoid an extra query if a `relation` is used instead, so I think it's good to merge it.

latest commit ca9e625bc7
Juan M. Cuello authored September 15, 2013
Octocat-spinner-32 lib Now it doesn't fire the query to fetch one record additionally July 30, 2013
Octocat-spinner-32 rails first commit December 18, 2010
Octocat-spinner-32 test Fix test when returning paginated empty results. April 01, 2013
Octocat-spinner-32 .gitignore Add test database file to .gitignore January 03, 2011
Octocat-spinner-32 CHANGELOG.rdoc Release 1.0.2 March 27, 2013
Octocat-spinner-32 MIT-LICENSE first commit December 18, 2010
Octocat-spinner-32 README.rdoc Update README.rdoc. June 08, 2011
Octocat-spinner-32 Rakefile Require rdoc/task instead of rake/rdoctask April 01, 2013
Octocat-spinner-32 install.rb first commit December 18, 2010
Octocat-spinner-32 jqgrid_for_rails.gemspec Make the project available as a gem. January 06, 2011
Octocat-spinner-32 uninstall.rb first commit December 18, 2010


This is a simple plug-in to create a JqGrid javascript code easily inside rails views.

It is extremely flexible, all the ruby code is converted to java script code, so you can use all the jqgrid supported features. It is not an abstraction layer from the jqGrid apis, instead, you type the same code you would do to create the grid using javascript but in Ruby. The code should follow the jqgrid api definition.

For example, to get this java script code:

jQuery("#invoices_list").jqGrid("navGrid", "#invoices_pager", {"search":true,"refresh":false});

You should type in ruby:

jqgrid_api 'invoices_list', [:navGrid, '#invoices_pager', {:search => true, :refresh => false}]

See below for more examples.


As a gem:

$ gem install jqgrid_for_rails

As a plugin:

$ rails plugin install git://


There is an example application at:


To generate the grid, you can first create a method in a helper and then call the jqgrid_api method to generate the java script code. For example, if you have an invoices_helper.rb file, you can define a method there:

# app/helpers/invoices_helper.rb

module InvoicesHelper

  include JqgridsHelper

  def invoices_jqgrid

    grid = [{
      :url => '/invoices',
      :datatype => 'json',
      :mtype => 'GET',
      :colNames => ['Inv No','Date'],
      :colModel  => [
        { :name => 'invid',   :index => 'invid',    :width => 180 },
        { :name => 'invdate', :index => 'invdate',  :width => 180 },
      :pager => '#invoices_pager',
      :rowNum => 10,
      :rowList => [10, 20, 30],
      :caption => 'My first grid',
      :onSelectRow => "function() { alert('Row selected!');}".to_json_var

    jqgrid_api 'invoices_list', grid

Now you can use the helper in the view:

# app/views/invoices/index.html.erb

<table id=invoices_list></table>
<div id=invoices_pager></div>

<%= raw(invoices_jqgrid) %>

Or, if you are using Rails 2.3.x :

<%= invoices_jqgrid %>

This will result in something like:

<table id=invoices_list></table>
<div id=invoices_pager></div>

    "colNames":["Inv No","Date"],
    "caption":"My first grid",
    "onSelectRow":function() { alert('Row selected!');}

Note: resulting code was indented for clarification.

You can do it better using content_for in the view:

<% content_for :head do %>
  <%= raw(invoices_jqgrid) %>
<% end %>

Don't forget to include the jquery and jqgrid javascript and stylesheet files!


This helper easily creates an array to be used as col_model.

col_model_for_jqgrid(['inv_date', 'total' ], {:width => 100})

  #=> [{:name=>"inv_date", :index=>"inv_date", :width=>100}, {:name=>"total", :index=>"total", :width=>100}]

So you you can use it when creating the grid in the helper:

grid = [{
  :url => '/invoices',
  :datatype => 'json',
  :mtype => 'GET',
  :colNames => ['Inv No','Date'],
  :colModel  => col_model_for_jqgrid(['Inv No','Date']),
  :pager => '#invoices_pager',
  :rowNum => 10,
  :rowList => [10, 20, 30],
  :caption => 'My first grid',
  :onSelectRow => "function() { alert('Row selected!');}".to_json_var

jqgrid_api 'invoices_list', grid


There are convenient methods available in the controllers


This method generates the json response for the grid. It takes the records found by the paginate method offered by will_paginate.

In the controller:

# app/controllers/invoices_controller.rb

class InvoicesController < ApplicationController

  def index
    @columns = ['invid', 'invdate']
    @invoices = Invoice.paginate(:page => params[:page], :per_page => params[:rows])

    if request.xhr?
      render :json => json_for_jqgrid(@invoices, @columns)


This method creates an active record order string using the params sent by the grid.

@invoices = Invoice.paginate(
  :page     => params[:page],
  :per_page => params[:rows],
  :order    => order_by_from_params(params))



Copyright © 2010 Juan M. Cuello, released under the MIT license

Something went wrong with that request. Please try again.