Grouping

FlexGrid supports grouping via source CollectionView.

Group the data by one or more properties by adding GroupDescription objects to the grid's collectionView.groupDescriptions.

The grid below groups the data by country and by product:

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
Country: Germany (34 items)
Product: Computers (17 items)
1
Germany
Computers
111,632
20,603.32
27,944.24
13
Germany
Computers
191,491
50,512.92
35,798.63
25
Germany
Computers
20,187
72,909.41
35,922.53
37
Germany
Computers
21,394
60,987.02
47,652.14
49
Germany
Computers
113,948
17,276.76
9,226.64
61
Germany
Computers
40,520
91,362.93
1,478.85
73
Germany
Computers
156,815
13,306.00
30,625.19
85
Germany
Computers
128,534
57,297.46
12,081.70
97
Germany
Computers
49,990
80,063.02
23,006.57
109
Germany
Computers
106,103
95,156.32
10,107.34
121
Germany
Computers
72,046
75,680.09
39,446.87

You may also want to hide the columns that are being grouped on in order to avoid showing redundant data.

The grid below groups the data by country and product, and hides those columns to achieve a compact grid.

Downloads
Sales
Expenses
Country: Germany (34 items)
Product: Computers (17 items)
111,632
20,603.32
27,944.24
191,491
50,512.92
35,798.63
20,187
72,909.41
35,922.53
21,394
60,987.02
47,652.14
113,948
17,276.76
9,226.64
40,520
91,362.93
1,478.85
156,815
13,306.00
30,625.19
128,534
57,297.46
12,081.70
49,990
80,063.02
23,006.57
106,103
95,156.32
10,107.34
72,046
75,680.09
39,446.87
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/Grouping.js".
c1.documentReady(function () {
    // basic grouping
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.collectionView.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Country"));
    theGrid.collectionView.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Product"));
 
    // select first item (after sorting/grouping)
    theGrid.select(new wijmo.grid.CellRange(0, 0), true);
 
    var theGridHideCols = wijmo.Control.getControl('#theGridHideCols');
    theGridHideCols.getColumn('Country').visible = false;
    theGridHideCols.getColumn('Product').visible = false;
    theGridHideCols.collectionView.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Country"));
    theGridHideCols.collectionView.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Product"));
 
    // select first item (after sorting/grouping)
    theGridHideCols.select(new wijmo.grid.CellRange(0, 2), true);
});
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: Grouping
        public ActionResult Grouping()
        {
            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
32
33
34
35
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Grouping_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Grouping_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Grouping_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Grouping_Text3)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).OrderBy("Country", "Product").Height(250)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Grouping_Text4)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Grouping_Text5)
</p>
@(Html.C1().FlexGrid().Id("theGridHideCols").Height(250)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Product").Header("Product");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
    .OrderBy("Country", "Product")
)