Aggregates Above the Data
To show aggregates above the data, follow these steps:
- Set the aggregate property on the columns that you want to aggregate.
- Create a single GroupDescription based on a dummy property.
- Optionally, freeze the top row to keep the aggregates in view.
ID
Country
Product
Sales
Expenses
Grand Totals: (200 items)
10,544,840.09
5,143,141.32
0
US
Phones
81,732.54
38,401.13
1
Germany
Computers
20,603.32
27,944.24
2
UK
Cameras
44,217.79
48,877.49
3
Japan
Stereos
29,190.63
23,365.74
4
Italy
Phones
46,951.19
49,107.56
5
Greece
Computers
86,237.02
49,767.35
6
US
Cameras
31,459.18
40,845.40
7
Germany
Stereos
99,190.22
1,631.26
8
UK
Phones
52,628.41
46,700.93
9
Japan
Computers
54,681.54
4,055.50
10
Italy
Cameras
45,332.72
14,858.59
11
Greece
Stereos
64,269.75
38,148.18
ID
Country
Product
Sales
Expenses
0
- C1FlexGrid/AggregatesAboveData.js
- C1FlexGrid/AggregatesAboveData.css
- AggregatesAboveDataController.cs
- AggregatesAboveData.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // This file locates: "Scripts/Lesson/C1FlexGrid/AggregatesAboveData.js".c1.documentReady(function () { var theGrid = wijmo.Control.getControl('#theGrid'); // create a group to show the grand totals var grandTotalsGroup = new wijmo.collections.PropertyGroupDescription('Grand Totals', function (item, propName) { return ''; } ); theGrid.getColumn('Sales').aggregate = 'Sum'; theGrid.getColumn('Expenses').aggregate = 'Sum'; theGrid.collectionView.groupDescriptions.push(grandTotalsGroup); theGrid.frozenRows = 1;}); |
1 2 3 4 | // This file locates: "Content/css/Lesson/C1FlexGrid/AggregatesAboveData.css"..wj-cell.wj-frozen-row { border-bottom: none;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1FlexGridController : Controller { // GET: AggregatesAboveData public ActionResult AggregatesAboveData() { return View(Models.FlexGridData.GetSales(200)); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1FlexGrid.AggregatesAboveData_Title)</h1><p> @Html.Raw(Resources.C1FlexGrid.AggregatesAboveData_Text1)</p><ol> <li> @Html.Raw(Resources.C1FlexGrid.AggregatesAboveData_Text2) </li> <li> @Html.Raw(Resources.C1FlexGrid.AggregatesAboveData_Text3) </li> <li> @Html.Raw(Resources.C1FlexGrid.AggregatesAboveData_Text4) </li></ol>@(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"); })) |