Javascript – How To Calculate Sum of jqgrid columns on footer row Locally

ajaxasp.netjavascriptjqgridjquery

After Displaying my database into jqgrid i need to add summary footer row which needs to calculate the sum of the particular column.I am populating Jqgrid locally..Also I have added Jqgrid Filter Which filters the data .According to my need I want my Summary footer to get changed on filtering the data from jqgrid filter toolbar…

Here is my code:

$(function () {
var gridData = null;
var nn = null;
$.ajax({
    url: 'Default.aspx/MyMethod',
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    type: 'POST',
    success: function (ReportDataNew, textStatus, XMLHttpRequest) {
        gridData = JSON.parse(ReportDataNew.d);
        console.log(gridData);

        $("#gridId").jqGrid({
            data: gridData,
            datatype: "local",
            height: '100%',
            autowidth: true,
            ignoreCase: true,
            rowNum: 100,
            rowList: [100, 200, 300],
            colNames: ['UserName', 'Ordinal', 'Extension', 'Trunk', 'Dialnumber', 'DialDate', 'DialTime', 'Duration', 'Destination', 'Price'],
            colModel: [
                       { name: 'username', index: 'username', width: 100, sortable: true, align: 'center' },
                       { name: 'ordinal', index: 'ordinal', width: 100, sortable: true, align: 'center' },
                       { name: 'price', index: 'price', width: 100, sortable: true, align: 'center'}
                      ]

I need to calculate the sum of price column

Best Answer

In you definition of the local data you could include a segment containing the userdata information that would be displayed in the footer. Before your pass the data to the grid you could then calculate the values that would be passed inside these variables.

Ex of the userdata: 

 userdata = new { colOneName = "Totals:", colTwoName = totalsVariableFromLocalCalculation}

Then in your grid you would turn on footers via 

        footerrow: true,
        userDataOnFooter: true,
Related Topic