CollectionView Grouping
Use the CollectionView.groupDescriptions property to specify which fields should be grouped.
Choose one of the options to see it in action:
Result:
ID
Country
Product
Sales
Expenses
110
UK
Cameras
85,173.58
44,806.17
45
Japan
Computers
84,641.55
30,657.89
375
Japan
Stereos
84,571.75
21,067.20
111
Japan
Stereos
84,433.97
17,809.89
224
UK
Phones
84,230.73
3,058.46
108
US
Phones
83,975.43
41,160.53
353
Greece
Computers
83,795.25
39,511.74
143
Greece
Stereos
83,793.89
21,157.98
486
US
Cameras
83,518.73
16,934.12
157
Germany
Computers
83,215.39
39,521.15
48
US
Phones
83,056.79
34,256.33
134
UK
Cameras
82,950.35
11,434.70
0
US
Phones
81,732.54
38,401.13
ID
Country
Product
Sales
Expenses
0
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | // This file locates: "Scripts/Lesson/C1Mvc/CVGrouping.js". c1.documentReady(function () { var theGrid = wijmo.Control.getControl( "#theGrid" ); var view = theGrid.collectionView; // change the grouping document.addEventListener( 'change' , function (e) { // remove the old groups view.groupDescriptions.clear(); // add the new groups var props = e.target.value.split( ',' ); for (var i = 0; i < props.length; i++) { var prop = props[i]; // group sales by value ranges var gd; if (prop == 'Sales' ) { gd = new wijmo.collections.PropertyGroupDescription(prop, function (item) { if (item.Sales > 80000) return 'High' ; if (item.Sales > 40000) return 'Medium' ; return 'Low' ; }); } else { // group others by value gd = new wijmo.collections.PropertyGroupDescription(prop); } view.groupDescriptions.push(gd); } }); // dump grouped data to console (no grid) document.getElementById( 'btnDump' ).addEventListener( 'click' , function () { if (!view.groups) { console.log( '*** no groups' ); } else { console.log( '*** ' + view.groups.length + ' groups:' ); for (var i = 0; i < view.groups.length; i++) { dumpGroup(view.groups[i], '' ); } } }); function dumpGroup(group, level) { // show information for this group var propName = group.groupDescription[ 'propertyName' ]; var groupName = group.name; var groupInfo = propName + ' > ' + groupName; // group summary groupInfo += ' (' + group.items.length + ' items)' ; // item count groupInfo += ' total sales: ' + wijmo.Globalize.format(group.getAggregate( 'Sum' , 'sales' ), 'c2' ); console.log(level + groupInfo); // show subgroups if (group.groups) { for (var i = 0; i < group.groups.length; i++) { dumpGroup(group.groups[i], level + ' ' ); } } } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1MvcController : Controller { // GET: CVGrouping public ActionResult CVGrouping() { return View(Models.FlexGridData.GetSales(500)); } } } |
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | @model IEnumerable< FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1Mvc.CVGrouping_Title) </ h1 > < p > @Html .Raw(Resources.C1Mvc.CVGrouping_Text1) </ p > < p > @Html .Raw(Resources.C1Mvc.CVGrouping_Text2) </ p > < label > < input type = "radio" name = "filter" value = "" checked = "true" /> @Html .Raw(Resources.C1Mvc.CVGrouping_Text3) </ label > < label > < input type = "radio" name = "filter" value = "Country" /> @Html .Raw(Resources.C1Mvc.CVGrouping_Text4) </ label > < label > < input type = "radio" name = "filter" value = "Country,Product" /> @Html .Raw(Resources.C1Mvc.CVGrouping_Text5) </ label > < label > < input type = "radio" name = "filter" value = "Country,Product,Sales" /> @Html .Raw(Resources.C1Mvc.CVGrouping_Text6) </ label > < p > @Html .Raw(Resources.C1Mvc.CVGrouping_Text7) < button id = "btnDump" class = "btn btn-default" > @Html .Raw(Resources.C1Mvc.CVGrouping_Text8) </ button > </ p > @ (Html.C1().FlexGrid().Id( "theGrid" ).Height(250) .ShowAlternatingRows( false ) .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column) .OrderByDescending( "Sales" ) .Bind(b=>b.Bind(Model).DisableServerRead( true )) .AutoGenerateColumns( false ) .Columns(cs=> { cs.Add().Binding( "Id" ).Header( "ID" ); cs.Add().Binding( "Country" ).Header( "Country" ); cs.Add().Binding( "Product" ).Header( "Product" ); cs.Add().Binding( "Sales" ).Header( "Sales" ); cs.Add().Binding( "Expenses" ).Header( "Expenses" ); }) ) |