jQuery Grid Footer Total Aggregates

The grid support showing the totals aggregates for all rows. All calculations are performed by the DataSource component and then passed to the grid. To configure totals you need to set aggregate property of the datasource component to array of aggregate fields. Then in order to associate aggregate with footer cell you need to use the footerTemplate property of the columns and add binding expression:

    dataSource: {
        data: products,
        sort: [ { path: "['Category']['CategoryName']", desc: true } ],
        aggregate: [
            { field: "ProductID", aggregate: "min" },
            { field: "UnitsInStock", aggregate: "average" },
            { field: "UnitsInStock", aggregate: "count" },
            { field: "Discontinued", aggregate: function (data, aggregate) { return "xxx"; } }
    columns: [
    { field: "ProductID", title: "ProductID", width: "330px", footerTemplate: "Min: {min}" },
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
    { field: "UnitsInStock", title: "Units In Stock", width: "130px", footerTemplate: "Avg: {average}, Count: {count}" },
    { field: "Discontinued", width: "130px", footerTemplate: "Test: {custom}" }
    detailTemplate: $("#detailTemplate1").html(),
    selection: {
        type: "row",
        multiple: true,
        toggle: false

Live example of footer aggregates you can find here: Aggregates