Skip to content


Subversion checkout URL

You can clone with
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
@Juanmcuello authored



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.