Question

I would like to calculate Total on the fly without havng to do it in calctotal.php. In essense this is a calculated column. I thought of using some event like afterInsertRow, but even with no event it moves the column data by one because the XML file is only 3 columns instead of four. So my Total column now has the data from Notes I did add a fake column to the php file, but why should I have to do that? Thanks

url:'./calctotal',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No', 'Amount','Tax','Total'm 'Notes'],
colModel :[ 
  {name:'invid', index:'invid', width:55}, 
  {name:'amount', editable: false, index:'amount', width:80, align:'right'}, 
  {name:'tax', index:'tax', width:80, align:'right'}, 
  **{name:'total', index:'total', width:80, align:'right'},**
  {name:'notes', index:'notes', width:80, align:'left'}

],

Answer 1

The bast way to implement “virtual columns” in jqGrid is the usage of the custom formatter. For example

{name:'amount',index:'amount',width:70, formatter:'currency', align:'right'},
{name:'tax',index:'tax',width:50, formatter:'currency', align:'right'},
{name:'total',index:'total',width:60, align:'right',
 formatter:function(cellvalue, options, rowObject) {
     var amount = parseInt(rowObject.amount,10),
         tax = parseInt(rowObject.tax,10);
     return $.fmatter.util.NumberFormat(amount+tax,$.jgrid.formatter.currency);
 }}

The main disadvantage of the usage of the custom formatter is that you use make full formatting inside. The call of the method $.fmatter.util.NumberFormat can help us to simplify the work.

If you use remote datatype (datatype: 'xml' or datatype: 'json') the server is responsible for data sorting. So the server should be able to sort the data not only for the “real” data field but for the “virtual” columns also. We use index:'total' above. So if the user click on the header of the ‘Total’ column the sidx parameter which will be send to the server will be total. So the server should be able to produce the data sorted by the total.

If you use local data you can use sorttype as the function to implement the sorting:

{name:'amount',index:'amount',width:70, formatter:'currency', sorttype:'number',
 align:'right'},
{name:'tax',index:'tax',width:50, formatter:'currency', sorttype:'number',
 align:'right'},
{name:'total',index:'total',width:60, align:'right',
 formatter:function(cellvalue, options, rowObject) {
     var amount = parseInt(rowObject.amount,10),
         tax = parseInt(rowObject.tax,10);
     return $.fmatter.util.NumberFormat(amount+tax,$.jgrid.formatter.currency);
 },
 sorttype:function(cellvalue, rowObject) {// like for sorttype:'number',
     var amount = parseInt(rowObject.amount,10),
         tax = parseInt(rowObject.tax,10);
     return amount+tax;
 }}

See the demo here.