ComponentOne FlexGrid for WinForms
In This Topic
    Grouping
    In This Topic

    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:

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

    A snapshot of FlexGrid control with grouped data.

    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;
    
    Note: WinForms .NET 5 Edition has only runtime assemblies. Due to the new design-time model in VS2019 Preview, which is not complete yet from the Microsoft side, we do not supply any special design-time features as of yet. However, some of the controls might show up at design-time and allow editing few properties in the property grid.