Grouping refers to combining rows based on column values. When grouping is applied to a grid, it automatically sorts the data, splits it into groups, and adds collapsible group rows above or below each group. In FlexGrid, these group rows are added above each group, by default. In case, you want to add them below every group, you can use SubtotalPosition property of C1FlexGrid class, which accepts values from SubtotalPositionEnum enumeration.

As grid is grouped on the basis of column values, it displays grouped columns by default. However, you can remove those columns from view by setting HideGroupedColumns property of C1FlexGrid class to true. Also, by default the group row displays a string of "{name}:{value}" format, where name refers to the grouped column and value is one of the unique values in the column. However, this can be altered using GroupHeaderFormat property of C1FlexGrid class, which sets format string for the groups. The group header string is displayed in the first column of the group row. In case there is large content in the group header, it might get clipped because of the column width. This can be resolved using AllowMerging property of C1FlexGrid class. You can set the AllowMerging property to AllowMergingEnum.Nodes so that the group header content can spill into the adjacent empty cells.

FlexGrid also allows you to aggregate the data and display the aggregated values on group rows for one or more columns. It provides Aggregate property of the Column class that can be set on columns to show their aggregate values (like sum or average) on the group header rows.

Sort grouped columns

FlexGrid allows you to sort columns by clicking their headers with the mouse through AllowSorting property of C1FlexGrid class. Sorting grouped columns will sort the groups and alter the order in which the groups are displayed. The sorting will be based on the value used to create the group. Sorting ungrouped columns will sort values within each group only. For example, if the user clicked the “Product Name” column header on the grid, the groups remain unchanged but the rows are sorted based on the alphabetical sorting applied to the products.

Customize the appearance of outline tree

FlexGrid lets you customize the appearance of the outline tree that shows the grouping in FlexGrid by setting the Tree.Style property of FlexGrid. For example, set it to TreeStyleFlags.Leaf to show the group header text.

All these features can be combined to perform grouping in a better way. In FlexGrid, grouping can be performed using any of the following two ways:

• Dynamic grouping: Allows grouping without UI interaction, i.e., through code.
• FlexGridGroupPanel control: Allows you to perform grouping through UI interaction without using any code.

The following image shows the FlexGrid control with grouped data based on its column values.

The following code shows grouping in FlexGrid:

'Add group
flex.GroupDescriptions = new GroupDescription[] {new GroupDescription("CustomerID")}

'Showing aggregate(sum) on the group header rows
Dim col = flex.Cols("Freight")
col.Aggregate = AggregateEnum.Sum
col.Format = "N2"

'Setting grid's AllowMerging property to Nodes so that the group header
' content can spill into adjacent empty cells
flex.AllowMerging = AllowMergingEnum.Nodes

'Setting HideGroupedColumns property to true in order to hide the grouped columns
flex.HideGroupedColumns = True

'Customizing the string which is displayed on the group headers 
flex.GroupHeaderFormat = "{name}:{value}"

'Customizing the appearance of the outline tree
flex.Tree.Style = TreeStyleFlags.CompleteLeaf

//Add group
flex.GroupDescriptions = new GroupDescription[] {new GroupDescription("CustomerID")};

//Showing aggregate(sum) on the group header rows
var col = flex.Cols["Freight"];
col.Aggregate = AggregateEnum.Sum;
col.Format = "N2";

//Setting grid's AllowMerging property to Nodes so that the group header content can //spill into adjacent empty cells
flex.AllowMerging = AllowMergingEnum.Nodes;

//Setting HideGroupedColumns property to true in order to hide the grouped columns
flex.HideGroupedColumns = true;

//Customizing the string which is displayed on the group headers 
flex.GroupHeaderFormat = "{name}:{value}";

//Customizing the appearance of the outline tree
flex.Tree.Style = TreeStyleFlags.CompleteLeaf;