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....

Vendee

Look here for the answer and here for more examples on the same subject which I answered before. – Guddle

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").

Starr

Here is the code that i added but its not working Sir rowNum: 10, rowList: [10, 20, 30], pager: '#UsersGridPager', sortname: 'UserID', viewrecords: true, sortorder: 'asc', autowidth: true, toppager: true, footerrow: true, gridComplete: function() { var $grid = $('#UsersGrid'); var colSum = $grid.jqGrid('getCol', '<Balance>', false, 'sum'); $grid.jqGrid('footerData', 'set', { 'Balance>: colSum' }); } – Vendee

@Vendee I believe I got you confused with the '<' and '>' brackets, your code should be more like this: gridComplete: function() { var $grid = $('#UsersGrid'); var colSum = $grid.jqGrid('getCol', 'Balance', false, 'sum'); $grid.jqGrid('footerData', 'set', { Balance: colSum }); } – Starr

How cam i use on click function on total record? – Dreamy