# Group

## Content



FlexGrid supports grouping through **IDataCollection** interface. It provides three overloads of **GroupAsync** method. Refer this [topic](https://developer.mescius.com/componentone/docs/services/online-datacollection/grouping.html) for more information about overload methods. In the example depicted, we have used **GroupAsync\<T>(this C1.DataCollection.IDataCollection\<T> dataCollection, params string[\] fields)** overload method that groups the data according to the specified group fields.

The image below shows grouping by the 'Country' field.

![](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/images/expand-collpase-grid-grouping.png)

The following code example illustrates data grouping by country and active state through DataCollection.

**csharp**

```csharp
public Grouping()
{
    this.InitializeComponent();
    var data = Customer.GetCustomerList(100);
    flexGrid1.ItemsSource = new ObservableCollection<Customer>(data);
    // Grouping done on "Country" column
    flexGrid1.DataCollection.GroupAsync("Country");
}        
```

**xml**

```xml
<Grid>
   <c1:FlexGrid x:Name="flexGrid1" AutoGenerateColumns="False" ShowOutlineBar="True" ColumnHeaderGridLinesVisibility="Horizontal" GridLinesVisibility="Vertical" IsReadOnly="True">
    <c1:FlexGrid.Columns>
        <c1:GridColumn Binding="Active" Width="Auto"/>
        <c1:GridColumn Binding="Name" Width="*"/>
        <c1:GridColumn Binding="OrderTotal" Width="Auto" Format="C" Aggregate="Sum" HorizontalAlignment="Right"/>
     </c1:FlexGrid.Columns>
   </c1:FlexGrid>
</Grid>           
```

The FlexGrid control allows you to split big chunks of data into groups and showcase rows summary for each group. FlexGrid also enables end-users to add an outline of rows, to collapse or expand groups. The FlexGrid class provides the [ShowOutlineBar](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Grid/C1.WinUI.Grid.FlexGrid.ShowOutlineBar.html) property to set a Boolean value, which decides whether the grid should display the outline button bar. If set to true, the grid will show an outline button bar, and if set to false, the grid does not show the outline bar.

## Outline Grid Bar

When the data is grouped into different levels, you can use the outline buttons 1 to collapse or 2 to expand multiple groups at once. Each outline button shows a number that indicates the group level.

![](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/images/grid-outlinebar.gif)

## Expand and Collapse Buttons

When you group data in a grid, the control draws buttons next to row groups. Each button has a expand or collapse symbol that indicates the group state. To collapse a group, click the ![](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/images/collapse-grid.png)sign, and to expand the group, click the ![](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/images/expand-grid.png) sign.

You can also use the [ColumnHeaderGridLinesVisibility](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Grid/C1.WinUI.Grid.FlexGrid.ColumnHeaderGridLinesVisibility.html) and [GridLinesVisibility](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.GridControl/C1.WinUI.Grid.C1GridControl.GridLinesVisibility.html) properties to indicate which grid lines separating column header cells are shown, and indicate which grid lines separating inner cells are shown, respectively. Another property that can be used is [IsReadOnly](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Grid/C1.WinUI.Grid.FlexGrid.IsReadOnly.html), which sets a value to determine whether the grid is read-only.

## Aggregates

You can display the aggregate value for each group in FlexGrid by setting the [Aggregate](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Grid/C1.WinUI.Grid.GridColumn.Aggregate.html) property on each column to one of the supported aggregate values. Some of the supported aggregate values are Sum, Average, Count, Minimum, Maximum, Custom, None, Range, Std, StdPop, Sum, Var and VarPop.

| **Aggregate Type** | **Definition** |
| --- | --- |
| Average | Returns the average value of the non-null cells in the group. |
| Count | Returns the count of non-null values in the group. |
| Custom | Raises the CustomAggregate event to calculate custom aggregates. |
| Maximum | Returns the maximum value in the group. |
| Minimum | Returns the minimum value in the group. |
| None | No aggregate. |
| Range | Returns the difference between the maximum and minimum values in the group. |
| Std | Returns the sample standard deviation of the values in the group (uses the formula based on n-1). |
| StdPop | Returns the population standard deviation of the values in the group (uses the formula based on n). |
| Sum | Returns the sum of all values in the group. |
| Var | Returns the sample variance of the values in the group (uses the formula based on n-1). |
|   VarPop   | Returns the population variance of the values in the group (uses the formula based on n). |