RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Combine jqGrid and Rails for Beautified Business Applications

Learn how to build a rich, data-driven Rails application by adding a slick jQuery grid (jqGrid) to it.


JqGrid is a feature-rich data grid built with the jQuery JavaScript library. Short for "jQuery grid," JqGrid has been around for quite a while and comes with rather extensive documentation. Hence, this article will not get into the details of installing jqGrid or using jQuery for rendering. It simply provides the basic steps for creating a simple application in Rails with jqGrid.

Using jqGrid in a Rails View

First and foremost, you have to integrate jqGrid with a Rails application. It is assumed that you have already installed the jqGrid plug-in for Rails. Once the plug-in has been installed properly, you would see the folder (your_app)/vendor/plugins/2dc_jqgrid.

Once you have installed jqGrid, jqGrid has to be imported to your Rails application. This is done by including the following tags:


in your app view file (e.g., index.html.erb).

Once jqGrid has been imported, you have to create a jqGrid. A good place to include a jqGrid will be in the jQuery(document).ready(function() as shown below. Note, this is a JavaScript code and has to be within the <script type="text/javascript" target="_blank">// <![CDATA[ .. // ]]></script> tags.

         var mygrid = jQuery("#item_instance").jqGrid({ 
              url:'/item_instances?q='+ <!--params[:q]-->, 
              datatype: "json", 
              colNames:['ID','NAME','DISPLAY NAME'], 
              colModel:[{name:'id', index:'id',resizable:false,width:35},
{name:'NAME', index:'NAME',edittype:'text',editable:true},
{name:'DISPLAY_NAME', index:'DISPLAY_NAME',edittype:'text',editable:true}], pager: '#item_instance_pager', rowNum:10, rowList:[10,25,50,100], imgpath: '/images/jqgrid', sortname: '', viewrecords: true, height:300, width: 500, sortorder: '', gridview: false, scrollrows: true, autoheight: false, autowidth: false, rownumbers: false, multiselect: false, subGrid: false, caption: "Item Instances" }).navGrid('#item_instance_pager', {edit:false,add:true,del:true,search:true,refresh:true}, {afterSubmit:function(r,data){return true;(r,data,'edit');}}, {afterSubmit:function(r,data){return true;(r,data,'add');}}, {afterSubmit:function(r,data){return true;(r,data,'delete');}} ) mygrid.filterToolbar();mygrid[0].toggleToolbar() });

Next, you have to declare an HTML table that actually gets rendered.

       <table id="item_instance" class="scroll" cellspacing="0" cellpadding="0" 

One can easily understand that item_instance is the actual HTML table that gets beautified using jQuery and some CSS to make it really look professional.

In the table that gets created (item_instance), you can see a "url" and an "edit_url." Url typically maps to the index method of the controller class, and edit_url, as the value suggests, is mapping to the update method of the ItemInstances controller class. The datatype field suggests that the medium of communication between the controller and the view is json.

The colNames field tells us the fields that are going to be displayed and their captions. In our case, a display of our table will look as shown in the image below:

Click here for larger image

Figure 1. Our jqGrid Table

The colNames are "ID", "NAME" and "DISPLAY NAME," respectively. The colMode tells you the type of the data that is displayed. It's a common practice to make the field ID non-editable. However, the fields NAME and DISPLAY NAME are editable.

The rowList parameter is the one that can be seen as a drop-down box, near the arrow at the bottom of the image. The options are 10, 25, 50 and 100. This lets you view a max of 10 or 25 or 50 or 100 entries at a time, whichever you chooses. The rowNum is the value that the we tell the system choose by default.

Finally, there is a navigation grid that lets you carry out the CRUD operations. Users have to define the portion shown below in order to get the respective icons for add, edit and delete.

              {afterSubmit:function(r,data){return true;(r,data,'edit');}}, 
              {afterSubmit:function(r,data){return true;(r,data,'add');}}, 
              {afterSubmit:function(r,data){return true;(r,data,'delete');}} 

That's it, and the view part is done. Now you have to get the server-side code in place.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date