How can I calculate a Total column on client side using jqGrid?

Question

I'm trying to implement a simple spreadsheet using jqGrid. These are the grid columns:

My javascript code looks like this:

$(function() {    
 var lastsel;

        jQuery("#my_excel_grid").jqGrid({

            url:'data_excel.php',
            datatype: "json",
            colNames:['id','name', 'lastname', 'data1','data2','total'],
            colModel:[
                {name:'id',index:'id', width:55, sortable:false},
                {name:'name',index:'name', width:90},
                {name:'lastname',index:'lastname', width:100},
                {name:'data1',index:'data1', width:80, align:"right", editable:true},
                {name:'data2',index:'data2', width:80, align:"right", editable:true},       
                {name:'total',index:'total', width:80,align:"right",
                        formatter: function (cellvalue, options, rowObject) 
                             {
                                 // Harcoded index won't work in the real life excel grid
                                 //        since the columns will be populated dynamically
                                 return parseInt(rowObject[3]) + parseInt(rowObject[4]);
                              }
                },      
            ],
            rowNum:10,
            rowList:[10,20,30],
            pager: '#my_excel_pager',
            sortname: 'id',
            sortorder: "desc",
            caption:"Excel",          
            editurl:"data_excel.php?op=edit",          

            onSelectRow: function(id) {
                    if (id && id !== lastsel) {
                      jQuery('#my_excel_grid').restoreRow(lastsel);
                      jQuery('#my_excel_grid').editRow(id, true);
                      lastsel = id;
                    }
                  },

             beforeSubmitCell: function(rowid, celname, value, iRow, iCol) { alert("beforeSubmitCell"); },
             afterSaveCell: function (rowid, celname, value, iRow, iCol) { alert("afterSaveCell"); },

        }); });

The issue I'm having is that beforeSubmitCell and afterSaveCell are not been called (I don't get the alerts messages), so I can't write the new value in the Total column. By the way the editurl url is dummy, it's not returning anything (I've also tried setting 'clientArray' with no success).

So, how can I calculate the Total column on client side?

FYI: The idea is to save the grid using an external "Save" button and also populate the columns dynamically as seen here and here

score 1 · Accepted Answer · answered Jun 24 '11 at 16:27

jqGrid have three editing modes which you can use: inline editing, form editing and cell editing. If you use editRow and restoreRow it means that you use the inline editing mode. The afterSaveCell and beforeSubmitCell events are used only in case of cell editing mode.

So what you need to do is

to remove the unused beforeSubmitCell and beforeSubmitCell events from the jqGrid definition.
to add additional parameters in the call of editRow. You need to use the aftersavefunc parameter. Instead of jQuery('#my_excel_grid').editRow(id, true); you can use jQuery(this).jqGrid('editRow', id, true, null, null, 'clientArray', {}, function(rowid,issuccess){alert(rowid);});

thanks, it worked! btw, you've repeated beforeSubmitCell in 1 — epzee, Jul 05 '11 at 12:07
@epzee: You are welcome! The event names which should be removed are `afterSaveCell` and `beforeSubmitCell` (both from the cell editing) — Oleg, Jul 05 '11 at 12:36

How can I calculate a Total column on client side using jqGrid?

1 Answers1