Browse DevX
Sign up for e-mail newsletters from DevX


Create a Rails-based Excel Clone with jqGrid : Page 2

With Rails and the jQuery grid (jqGrid), you can create a rich Excel-like application for your business users.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Selecting and Editing Multiple Rows in jqGrid

As discussed earlier, users can produce a rich jqGrid table in the browser with the JavaScript code below, within the <script>..</script> tags.

var mygrid = jQuery("#fact").jqGrid({ url:'/facts?q=1', editurl:'/facts/update', datatype: "json", colNames:['ID','NAME'], colModel:[{name:'id', index:'id',resizable:false,width:135, editable:false },{name:'NAME', index:'NAME',edittype:'text',editable:true}], pager: '#fact_pager', rowNum:$row_num, rowList:$no_elem, imgpath: '/images/jqgrid', sortname: '', viewrecords: true, height:$table_height, width: $table_width, sortorder: '', gridview: false, scrollrows: true, autoheight: false, autowidth: false, rownumbers: false, multiselect: true, subGrid: true, .... ....

Note the multiselect field is highlighted and set to true. This field creates (enables) the checkboxes as shown in the Figure 4 below.

jqGrid and Rails Business Applications
Click here for larger image

Figure 4. Checkboxes Enables

The user can select the rows by either clicking on that particular row or by clicking the checkbox. JqGrid takes care of the editing of the fields. By clicking the "edit" [pencil] icon at the bottom of the table, users can traverse through the fields of each row and edit the values. This is very similar to what was discussed in the previous section. In Figure 5 below, the row containing the value "COST" has been selected.

jqGrid and Rails Business Applications
Click here for larger image

Figure 5. Row Containing "COST" Has Been Selected

One of the important features that a user typically expects with multiselect is deletion. For any deletion to happen, users have to fetch the ID or the rows that need to be passed to the backend for deletion.

ondblClickRow: function(id) { if (id) { var grid = jQuery('#fact'); if(id != prev) { grid.saveRow(prev); grid.editRow(id, true); prev = id; } else { prev = -1; grid.saveRow(prev); } } }, onSelectRow: function(id) { var gr = jQuery("#fact").getGridParam('selarrrow'); }, onKeyup: function(id){ grid.saveRow(id); },

JqGrid allows users to fetch the selected rows and the contents using the onSelectRow function. The values within the grid can be fetched using getGridParam. Note the selarrrow parameter to getGridParam. That is not misspelled; it is indeed 'sel' + 'arr' + 'row'. Selarrrow returns an array of IDs of all the fetched IDs.

The backend controller code includes the code for deletion. In the destroy method of the controller class, all the IDs that were marked for deletion are fetched from the params[:id] parameter.

def post_data if params[:oper] == "del" destroy else @fact = { :id => params[:id], :NAME => params[:NAME], :TYPE => params[:TYPE] } if params[:id] == "_empty" create else Fact.find(params[:id]).update_attributes(@fact) end end render :nothing => true end # DELETE /facts/1 # DELETE /facts/1.xml def destroy ids = params[:id].split(","); @facts = Fact.find(ids) if(@facts.nil?) puts "**********************" puts "No item found for deletion" puts "**********************" end @facts.each do |fact| fact.destroy end @facts = Fact.find(:all, :limit => params[:rows], :offset => (params[:page].to_i - 1) * params[:rows].to_i); end end

Selarrrow may sound a bit weird and at times users may want to select the ID of just one row. For that, getGridParam('selrow') returns the ID of the presently selected row. You can look into jqGrid's getGridParam documentation for more details on the other methods that are available.

In upcoming articles in this series, the focus will be on selecting and using multiple rows in jqGrid.

Raveendran Vadakkoot is a software architect, designer and engineer with more than 13+ years of experience in multinational software industries.
Thanks for your registration, follow us on our social networks to keep up-to-date