Combine jqGrid and Rails for Beautified Business Applications : Page 2

Using jqGrid with a Rails Controller

At the server side, for a simple table, all that you have to do is to get the data from the table and send that in JSON format to the view.

        @item_instances = ItemInstance.find(:all, :conditions => ["ITEM_METADATA_ID = ?", params[:q]], 
                  :limit => params[:rows], 
                  :offset => (params[:page].to_i - 1) * params[:rows].to_i); 

        respond_to do |format| 
            format.html 
            format.json { render :json => @item_instances.to_jqgrid_json([:id, :NAME,:DISPLAY_NAME], 
                                                       params[:page], params[:rows], params[:records]) } 
        end 

Note that the Rails jqGrid plug-in has a to_jqgrid_json function, which converts the ItemInstance object to JSON format, which the jqGrid in the view can display. Although this will make sure that data is fetched from the server side and displayed as shown in Figure 1, the CRUD operations won't be complete.

  def post_data 
          if params[:oper] == "del" 
            ItemInstance.find(params[:id]).destroy 
          else 
            @item_instance = { :id => params[:id], :ITEM_METADATA_ID => params[:q], 
            :NAME => params[:NAME], 
                                :DISPLAY_NAME => params[:DISPLAY_NAME] 
                             } 
            if params[:id] == "_empty" 
              ItemInstance.create(@item_instance) 
            else 
              ItemInstance.find(params[:q]).update_attributes(@item_instance) 
            end 
          end 
          render :nothing => true 
  end 

In the previous sections, the usage of jqGrid along with Ruby on Rails was discussed in detail. In the following section, the focus will predominantly be on making the CRUD operations look a bit more professional and how you can achieve this with the help of jqGrid and a bit of supporting jQuery scripts.

CRUD Icons in jqGrid

JqGrid provides the users with a set of icons for the CRUD operations as shown in Figure 2 below:

Figure 2. JqGrid Icons for CRUD Operations

The icons are provided by jqGrid out of the box, and they can be enabled or disabled to suit the user's needs. In the snippet below, you can see that there are a set of true and false conditions. "Edit:false" when declared in the navGrid disables the edit icon (the edit icon disables from the table). It also disables editing of the rows of the table. "Edit:true," on the other hand, would have enabled the edit icon and let the users edit the contents. Though the edit icons on the table (ui) can be enabled and disabled, it does not actually mean that the functionality of editing and save, or deleting and save has been enabled at the back end. This has to be explicitly enabled by the user. From the code below, one can notice easily that "edit" has been disabled. However, add, delete, search and refresh are enabled. The users can only see the icons of the operations that have been enabled (Figure 2).

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');}}
)