How to calculate the Sum of Column and show On FooterRow In Jqgrid in Asp.net

Question

Hii Guys!! I displayed data in jqgrid and enabled ' footerrow: true' in jqgrid Now as per my need i want to show the sum of particular column on footer Row...Plz guys Help me as I am using Jqgrid For first time ...

Thanks in advance....

Answer 1

If you want to sum the values which are in the jqGrid, you can do that in JavaScript (preferably in gridComplete event):

$('#gridId').jqGrid({
    ...
    footerrow: true,
    gridComplete: function() {
        var $grid = $('#gridId');
        var colSum = $grid.jqGrid('getCol', '<Your column name>', false, 'sum');
        $grid.jqGrid('footerData', 'set', { 'Your column name>: colSum });
    }
});

If you need to calculate the sum on the server side, then you must enable userDataOnFooter option first:

$('#gridId').jqGrid({
    ...
    footerrow : true,
    userDataOnFooter : true
});

And then include the sum in your server response. For exmple in case of JSON it should look like this:

{
    total: x,
    page: y,
    records: z,
    rows : [
        ...
    ],
    userdata: { <Your column name>: <sum counted on server side> }
}

You can also take a look at live example available on jqGrid Demos page (you should choose "New in Version 3.5" and then "Summary Footer Row").