Grouping collects the data together in an efficient way which makes it easier to understand the grid. In FlexGrid, youcan display data that is groupedby invoking the GroupAsync method of the C1DataCollection class.

Group description objects are flexible, allowing you to group data based on value or on grouping functions. You can tap anywhere in the group row to expand or collapse grouped rows. TheGIF below shows how the FlexGrid appears after grouping.

The following code example demonstrates how to apply Grouping in FlexGrid.

@page "/FlexGrid/Grouping"
@using System.Collections.ObjectModel;
@using C1.DataCollection
@using C1.Blazor.Core
@using C1.Blazor.Grid

<FlexGrid ItemsSource="items" AutoGenerateColumns="false" VerticalScrollBarVisibility="ScrollBarVisibility.Visible" Style="@("max-height:50vh")">
   <FlexGridColumns>
     <GridColumn Binding="Active" Width="70" HorizontalAlignment="C1HorizontalAlignment.Center" />
     <GridColumn Binding="Name" Width="GridLength.Star" />
     <GridColumn Binding="OrderTotal" Format="C" Aggregate="GridAggregate.Sum" HorizontalAlignment="C1HorizontalAlignment.Right" />
   </FlexGridColumns>
</FlexGrid>

@code
{
C1DataCollection<Customer> items;
 protected override async Task OnInitializedAsync()
 {
  var collectionView = new C1DataCollection<Customer>(Customer.GetCustomerList(100));
  await collectionView.GroupAsync(c => c.Country); items = collectionView;
  }
}

Aggregate functions

InFlexGrid columns have an Aggregate property that allows you to show data summaries. To show group aggregates, set the aggregate property on the columns that you want to aggregate usingGridAggregate enumeration.

It specifies the type of aggregate values as describedin the table below. Refer to the code sample above for theimplementation of aggregate functions.