To show aggregates below the data, set the aggregate property on the columns that you want to aggregate, and add a GroupRow to the grid's columnFooter panel.

Country

Product

Sales

Expenses

Phones

81,732.54

38,401.13

Germany

Computers

20,603.32

27,944.24

Cameras

44,217.79

48,877.49

Japan

Stereos

29,190.63

23,365.74

Italy

Phones

46,951.19

49,107.56

Greece

Computers

86,237.02

49,767.35

Cameras

31,459.18

40,845.40

Germany

Stereos

99,190.22

1,631.26

Phones

52,628.41

46,700.93

Japan

Computers

54,681.54

4,055.50

Italy

Cameras

45,332.72

14,858.59

Greece

Stereos

64,269.75

38,148.18

Phones

38,100.45

17,157.09

// This file locates: "Scripts/Lesson/C1FlexGrid/AggregatesBelowData.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    theGrid.getColumn('Sales').aggregate = 'Sum';
    theGrid.getColumn('Expenses').aggregate = 'Sum';
 
    theGrid.columnFooters.rows.push(new wijmo.grid.GroupRow());
    theGrid.bottomLeftCells.setCellData(0, 0, 'Σ');
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: AggregatesBelowData
        public ActionResult AggregatesBelowData()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.AggregatesBelowData_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.AggregatesBelowData_Text1)
</p>
@(Html.C1().FlexGrid<FlexGridData.Sale>().Id("theGrid").Height(250)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID").Width("60").IsReadOnly(true);
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Product").Header("Product");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)