Aggregates
FlexGrid columns have an aggregate property that allows you to show data summaries for the whole grid or for each group.
To show group aggregates, set the aggregate property on the columns that you want to aggregate, and create groups by dragging the column headers into the group panel above the grid.
Notice how the group rows contain the sum of the 'Sales' and 'Expenses' columns for each group. The aggregates are updated automatically when you edit the data.
Drag columns here to create groups
ID
Country
Product
Sales
Expenses
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
12
US
Phones
38,100.45
17,157.09
ID
Country
Product
Sales
Expenses
0
1 2 3 4 5 6 | // This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsAggregates.js". c1.documentReady(function () { var theGrid = wijmo.Control.getControl( '#theGrid' ); theGrid.getColumn( 'Sales' ).aggregate = 'Sum' ; theGrid.getColumn( 'Expenses' ).aggregate = 'Sum' ; }); |
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: ColumnsAggregates public ActionResult ColumnsAggregates() { 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 | @model IEnumerable< FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1FlexGrid.ColumnsAggregates_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.ColumnsAggregates_Text1) </ p > < p > @Html .Raw(Resources.C1FlexGrid.ColumnsAggregates_Text2) </ p > < p > @Html .Raw(Resources.C1FlexGrid.ColumnsAggregates_Text3) </ 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" ); }) .ShowGroupPanel(p=>p.Placeholder(Resources.C1FlexGrid.ColumnsAggregates_Text4)) ) |