how use total colunme in footer jqgrid

Question

iam create jqgrid dynmamic but i have problem. when create footer jqgrid i want total colunme id with summaryType .but show result empty this demo enter link description here

this my code

 $grid.jqGrid({
        data: data,
        colModel: [
            { name: "act", template: "actions" },
            { name: "id", width: 50,
               summaryTpl: "Sum: {0}",
                summaryType: "sum",


            },

Answer 1

The reason of the problem can be easy explained. The properties summaryTpl: "Sum: {0}", summaryType: "sum" are used during grouping of data and not for placing some data in the footer row. To fill the footer you can either use userDataOnFooter: true option and to specify userData option too or to call footerData to set the content of the footer explicitly.

The demo https://jsfiddle.net/OlegKi/dnfk8hmr/139/ calculates first the sum

var i, sum = 0;
for (i = 0; i < data.length; i++) {
    sum += parseInt(data[i].id, 10);
}

and then uses the options

footerrow: true,
userDataOnFooter: true,
userData: { id: sum }

to create the footer and to set the calculated sum in the id column of the footer row.

Another demo https://jsfiddle.net/OlegKi/dnfk8hmr/138/ uses footerData and getCol methods inside of loadComplete

footerrow: true, // the footer will be used for Grand Total
loadComplete: function () {
    var $self = $(this);
    $self.jqGrid("footerData", "set", {
        id: parseFloat($self.jqGrid("getCol", "id", false, "sum"))
    });
}

It's important to remark that getCol used in the demo access the data only from the current page. You can see that clear on the demo https://jsfiddle.net/OlegKi/dnfk8hmr/140/, where rowNum is changed to 2.