How to calculate row sum on user entry in free jqgrid

Question

Row sum should calculated if price or quantity is changed. Formatter is created according to How to access other row data from a cell's custom formatter in JqGrid

In inline and row editing modes row sum doesnt change. Row sum column is read only and does not have id assigned. So it is difficult to create script to change it.

How to fix this so that row sum is calculated on edit ? Testcase is in http://jsfiddle.net/ex6158L1/4/ containing

javascript

var serverResponse = {
        "page": "1",
        "records": "3",
        "rows": [
            { "Id": "1", Quantity:4, Price : 23.33 },
            { "Id": "2", Quantity:4.55, Price : 76.66 }

        ]
    },
    $grid = $("#categorysummary");

    function sumFmatter (cellvalue, options, rowObject) {
        return options.rowData.Quantity *
                options.rowData.Price;
    }

$grid.jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    datatype: "json",
    mtype: "POST", // needed for JSFiddle echo service
    pager: '#pager',
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    //colNames: ["Quantity", "Price"],
    colModel: [
        { name: 'Id', hidden: true },
        { name: 'Quantity', editable: true},
        { name: 'Price', editable: true },
        { name: "Sum", formatter: sumFmatter,  editable: "readonly" }
    ],
    jsonReader: {
        id: 'Id',
        repeatitems: false
    },
    sortname: 'Id',
    viewrecords: true
})
.jqGrid("navGrid",'#pager')
.jqGrid("inlineNav",'#pager');

and css

<div class="container">
    <div id="pager"></div>
    <table id="categorysummary"></table>
</div>

Answer 1

The first problem, which you have, is the bug in free jqGrid, which follows that options.rowData was not filled inside of setRowData. I posted the corresponding fix to GitHub to eliminate the problem.

The next problem is the requirement to reformat the data of editable: "readonly". Form editing do this, but not inline editing. One can use either editable: "hidden" or to add the option

inlineEditing: {
    extraparam: { Sum: "" }
}

which extend the results of inline editing with the dummy value "" for Sum column. It force reformatting of the value in the Sum column.

I would recommend you additionally to change the formatter sumFmatter which you use to

function sumFmatter (cellvalue, options, rowObject) {
    var quantity = parseFloat(options.rowData.Quantity || 0),
                    price = parseFloat(options.rowData.Price || 0);
    return (quantity * price).toFixed(2);
}

see the demo http://jsfiddle.net/OlegKi/ex6158L1/7/ or to

function sumFmatter (cellvalue, options, rowObject, action) {
    var quantity = parseFloat(options.rowData.Quantity || 0),
        price = parseFloat(options.rowData.Price || 0);

    return $.fn.fmatter.call(this, "number", quantity * price,
                             options, rowObject, action);
}

where I called formatter: "number" to format the results of the multiplication (quantity * price).

See the resulting demo http://jsfiddle.net/OlegKi/ex6158L1/10/