CODEWITHSUNDEEP
jqgrid
epzee
epzee

Reputation: 568

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

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

ID | Name | LastName | Data1 | Data2 | Total (Total would be Data1 + Data2)

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

Upvotes: 0

Views: 2458

Answers (1)

Oleg
Oleg

Reputation: 221997

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

  1. to remove the unused beforeSubmitCell and beforeSubmitCell events from the jqGrid definition.
  2. 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);});

Upvotes: 1

Related Questions