CollectionView Grouping

Use the CollectionView.groupDescriptions property to specify which fields should be grouped.

Choose one of the options to see it in action:

No Grouping By Country By Country and by Product By Country, Product, and Sales

Result:

Country

Product

Sales

Expenses

110

Cameras

85,173.58

44,806.17

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

Phones

84,230.73

3,058.46

108

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

Cameras

83,518.73

16,934.12

157

Germany

Computers

83,215.39

39,521.15

Phones

83,056.79

34,256.33

134

Cameras

82,950.35

11,434.70

Phones

81,732.54

38,401.13

// 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 + '  ');
            }
        }
    }
});

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

@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");
    })
)