Add dynamic grouping to your WinForms datagrid

What You Will Need
• ComponentOne WinForms Edition
• Visual Studio 2022

Controls Referenced
• FlexGrid for WinForms

Tutorial Concept
Learn how to enable grouping in the FlexGrid datagrid control for WinForms. In this tutorial, we configure the datagrid for grouping in C# code and enable runtime grouping by the end-user.

The flexible FlexGrid control supports several datagrid grouping solutions for Windows Forms applications. You can implement aggregates and subtotals, nested content with row details, collapsible node rows (like a Tree Grid), and even a runtime, drag-and-drop grouping panel.

In this blog, we will demonstrate two of these approaches: first, a straightforward grouping implementation with aggregation in code, and second, a runtime, dynamic grouping feature that your end users will love. In the sections below, we will cover:

• Purposes of Grouping a Datagrid
• Dynamic Grouping by Code
• Dynamic Grouping at Runtime

Why Group a Datagrid?

Grouping can make data easier to understand, navigate, and analyze. Dynamic grouping automatically sorts the data, splits it into groups, and adds collapsible group rows above or below each group. The group rows may include aggregate values for one or more columns.

For example, consider this grid showing data from a DataTable object:

_flex.DataSource = myDataTable;

This will automatically generate columns and load the data to appear as such:

This is a typical datagrid view. End users can analyze the data by sorting, filtering, and scrolling without developers having to write any code. However, if you want to enable grouping and aggregating, you will have to write a bit of code.

Dynamic Grouping by Code

Grouping can be enabled on the FlexGrid by using the GroupDescriptions property. Simply add a group description to the GroupDescriptions array for each field by which you wish to group.

// bind grid to data source
_flex.DataSource = GetDataTable();

// add groups
_flex.GroupDescriptions = new GroupDescription[] {
    new GroupDescription("ShipCountry"),
    new GroupDescription("CategoryName")
};

// add aggregate to "Sale Amount" column
var col = _flexDataTable.Cols["Sale Amount"];
col.Aggregate = AggregateEnum.Sum;
col.Format = "N2";

// allow grouped cells to spill into empty cells
_flex.AllowMerging = AllowMergingEnum.Nodes;

Notice in the code above, we also enable aggregation, which provides a summary calculation for each group. The groups are collapsible, and the group header rows contain the aggregate information for the Sale Amount column.

The grey rows represent group headers. They contain expand/collapse glyphs, a customizable string showing the group information, and aggregate information for any columns where the Aggregate property is set to a value other than None. You can customize the format of the group header row text by setting the GroupHeaderFormat property.

The Ship Country and Category Name columns contain a lot of repetitive data because the grid is grouped by those values. You can automatically remove those columns from view by setting the HideGroupedColumns property to true. The grid below does that and adds some custom styling to the group rows:

Users can sort columns by clicking their headers with the mouse. Sorting grouped columns will sort the group values, while sorting ungrouped columns will sort values within each group only.

For example, if the user clicked the “Product Name” column header on the grid above, this will appear:

The groups have not changed, but the product names are now sorted alphabetically.

You can prevent mouse sorting by setting the AllowSorting property to false on the whole grid or individual columns.

Sorting is an important part of grouping. To create and update the groups, the grid starts by performing a multi-property sort, including all the groups plus any additional sorts created, for example, by user clicks on column headers. After the data is sorted, the grid inserts the group header rows and calculates the subtotals as needed.

Because of this, grouping requires data sources that implement the IBindingListView interface. These include:

1. The DataView class (used with data from databases)
2. The SortableBindingList class, included in the FlexGrid assembly (used with lists of custom objects)
3. Any other custom class that implements the IBindingListView interface

Properties and classes that make up the FlexGrid’s dynamic grouping feature:

1. Bind the grid by setting its DataSource property to a class that implements the IBindingListView interface (e.g., DataView or SortableBindingList).
2. Set the grid’s GroupDescriptions property to a list of GroupDescription objects that describe how the data should be grouped.
3. Optionally, set the grid’s GroupHeaderFormat property to define the content of the first cell in the group header rows.
4. Optionally, set the grid’s AllowMerging property to AllowMergingEnum.Nodes, so the group header content can spill into adjacent empty cells.
5. Optionally, set the Aggregate property on columns to show their aggregate values (like sum or average) on the group header rows.
6. Optionally, customize the appearance of the outline tree by setting the grid’s Tree.Style property (for example, set it to TreeStyleFlags.Leaf to show only the node text without lines or collapse/expand glyphs).

Dynamic Grouping at Runtime

FlexGrid for WinForms also supports a GroupPanel control to enable dynamic, runtime grouping in FlexGrid. This feature is built upon the same grouping logic discussed above. Users can drag column headers into the panel to create and drag groups to new positions. In addition, users can use the context menu to collapse all, expand all, and clear grouping.

The GroupPanel also allows you to limit the maximum number of groups that can be created through the MaxGroups property and determine whether grouped columns should be displayed on the grid through the HideGroupedColumns property.

How to add a Group Panel to FlexGrid

The GroupPanel control is supported using an extension control named C1FlexGridGroupPanel, which is provided by the C1.Win.FlexGrid.GroupPanel assembly.

1. Add a reference to C1.Win.FlexGrid.GroupPanel (for .NET 9.0+)
   a. or C1.Win.C1FlexGrid.GroupPanel for .NET Framework
2. Drag and drop the GroupPanel control from the toolbox on the form and place it above FlexGrid
3. Set the FlexGrid property of GroupPanel to the instance of FlexGrid on the form
4. Optionally, set the Text property like “Drag a column here to group by that column.”
5. Optionally, set MaxGroups property to limit the number of groups allowed
6. Optionally, set the HideGroupedColumns property to show\hide grouped columns in the grid

We hope you like the FlexGrid grouping features. We think they are beneficial and easy to use. We also have similar implementations available on platforms including WPF, WinUI, ASP.NET Core, and JavaScript.

Originally published at https://developer.mescius.com on May 8, 2025.