Blazor | ComponentOne
Controls / FlexGrid / Data Operations / Grouping
In This Topic
    Grouping
    In This Topic

    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.

    Grouping

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

    Razor
    Copy Code
    @page "/FlexGrid/Grouping"
    @using Localization
    @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.

    Member Description
    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 Raise 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).