breaking into the unknown…

jqgrid with rails 3

Leave a comment

jqGrid is standalone jQuery library , which is one and all solution for data rendering in your view. The detail is available here. I will right some other post someday explaining its basics. Today, I will explain its implementation using jqgrid_for_rails .The sample code here is from loan_documents_controller.rb of my application. My model class is LoanDocument with table as loan_documents

STEP 1:  Add the gem to your gemfile and run bundle install

gem ‘jqgrid_for_rails’, :git => ‘’

Important thing to note here is that , I am also passing the repository path for the gem. This is because by default bundle install the gem from . The gem author may have updated the code to git but not pushed it to the rubygem host. That’s what I believe , as when I look the code in git repository, I found the method I needed, but could not find that in installed version of that gem in my system. So , specifying the git path as above and running the bundle update jqgrid_for_rails solved my problem.

STEP 2:  Define the route for the action which will return data to be represented by jQgrid

match ‘/loan_documents/unsigned’=> ”loan_documents#unsigned” # unsigned action of my loan_documents controller will generate the data

STEP 3:  Defining the unsigned action in controller

include JqgridFilter  # this will be required for filtering the result from jqgrid view, say sorting , searching etc
class LoanDocumentsController < ApplicationController
def unsigned

documents = [] #defined the array documents to hold my data to be displayed
columns = [‘id’, ‘document_name’, ‘application_number’, ‘application_name’, ‘applied_at’, ‘user_action’] #list of column you want to display in view
conditions = filter_by_conditions columns  # filter_by_conditions method is defined in JqgridFilter module you have included at the top. It will generate a condition string automatically for you depending upon which column in view you want to search, in case you have activated column search in jqgrid setting
ordering = order_by_from_params params # same as condition, it will generate order clause for you automatically
documents = LoanDocument.unsigned( :page => params[:page], :per_page => params[:rows])  # The Query which will bring data  from loan_documents table
date_format = { |val| val.strftime(“%Y-%m-%d”) if val } # It will change the formate of date for me
render :json => json_for_jqgrid(documents, columns, :format => {‘user_action’ => action_button, ‘applied_at’ => date_format}) #this is the line which will finally return the data, in json formate. here json_for_jqgrid is the method which do the conversion of data to json formate needed by jqgrid. though jqgrid support other data formate also, Iam not sure this gem support those or not



STEP 4:  Add function to generate jqgrid view in application helper

include JqgridsHelper

def unsigned_documents_jqgrid

grid = [{

url: ‘/loan_documents/unsigned’, #url of action which will generate data for you
datatype: “json”, #set the type of data grid should read
colNames: [‘id’, ‘document_name’, ‘application_no’, ‘application_name’, ‘applied_at’, ‘Action’], #name which appear for each column, can be anything you want
colModel: [ # for colModel name can be anything, but index must be attribute name of the model returning the data. further, what ever name you choose it should not contain any space, if name is of two words or more use _ between them. On safer side, you can keep both name and index same as the attribute name
{name: ‘’, index: ‘’, width: 30}, # instead of id we are using because my data retrieval  query have join table, so throw error if we not specify to consider id of which table
{name: ‘name’, index: ‘document_name’, width: 177}, #name of the attributes of table, you want to show in corresponding column of view
{name: ‘application_no’, index: ‘application_number’, width: 75},
{name: ‘application_name’, index: ‘application_name’, width: 120},
{name: ‘applied_at’, index: ‘applied_at’, width: 130},
:pager => ‘#unsigned_documents_pager’, #id of element in view to which you want to attach the pager
:rowNum => 10, # no of row to display at a time, is equivalent to setting per page of pagination
:rowList => [10, 20, 30], # user can select to see no of row i,e he can set per page dynamically
:height => 136, #height of the gird table
sortname: ‘’,  #default field used for sorting
sortorder: “ASC”, #default sorting order
:caption => ‘My Unsigned Documents’ #this will display as the name of your grid table


nav_control = [:navGrid, “#unsigned_documents_pager”, {:del => false,:edit=>false, :add => false, :search => false},
{:closeAfterEdit => true, :closeOnEscape => true}, {}, {}, {}, {}] #you can control the control on the grid ex: I have disabled del, edit, add etc. also note that, I have attached the nav_control to same div with id unsigned_documents_pager to which pager is attached, if you want you can create another element, and attach the navcontrol to that

jqgrid_api ‘unsigned_documents_list’, grid, nav_control  #this is the line which will attach the grid to table with id unsigned_documents_list in your view file along with the other controls


STEP 5: Displaying the jqgrid in your view

<table id=”unsigned_documents_list”></table>
<div id=”unsigned_documents_pager”></div>
<%= raw(unsigned_documents_jqgrid) %>

Now, when you load the page containing the code in step 5, you will see a well formated tabuler view of your data. You can add features like allowing user to search any data columnwise, deleting or editing rows on fly, adding custom action button for each data rows etc. You can find the enhanced implementation here.

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s