title: How can I calculate a Total column on client side using jqGrid?
body: <p>I'm trying to implement a simple spreadsheet using jqGrid. These are the grid columns: </p>
  
  <p><code>ID | Name | LastName | Data1 | Data2 | Total</code> (Total would be Data1 + Data2)</p>
  
  <p>My javascript code looks like this:</p>
  
  <pre><code>$(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 &amp;&amp; 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"); },
  
          }); });
  </code></pre>
  
  <p>The issue I'm having is that <em>beforeSubmitCell</em> and <em>afterSaveCell</em> 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 <em>editurl</em> url is dummy, it's not returning anything (I've also tried setting 'clientArray' with no success).</p>
  
  <p>So, <strong>how can I calculate the Total column on client side?</strong></p>
  
  <p>FYI: The idea is to save the grid using an <a href="https://stackoverflow.com/questions/3828261/jgrid-save-cell-on-button-click">external "Save" button</a> and also populate the columns dynamically as seen <a href="https://stackoverflow.com/questions/2277962/jqgrid-and-dynamic-column-binding">here</a> and <a href="https://stackoverflow.com/questions/3867459/dynamic-population-of-jqgrid-colmodel-and-data">here</a></p>