概要行

Summarizing data is one of the most important features of the grid where you can easily group the similar data and calculate various types of aggregates such as Sum, Average, Count, Max, Min, and more. This feature can be implemented in FlexGrid using summary rows.

In FlexGrid, these summary rows are represented by the GridSummaryRow class and they define group of data items. By default, the summary row(s) are added as a footer row at the bottom of the grid and show the summaries based on the GridColumn.Aggregate property set on the columns. The summary row(s) can also be hidden or displayed as group rows by using the GroupSummariesPosition property. This property uses GridGroupSummariesPosition enumeration to specify where to show the group-summaries.

The following image showcases summary row as footer row in FlexGrid.

The following code showcases how to add summary row in FlexGrid using the GridSummaryRow class. This row displays the minimum and maximum order counts along with the sum of total orders. This example uses the Customer.cs class available in the BlazorExplorer product sample to display data in the grid.

Index.razor	コードのコピー
@using C1.Blazor.Grid @using C1.Blazor.Core @using System.Collections.ObjectModel; <FlexGrid AutoGenerateColumns=false ItemsSource="customers" Style="@("max-height:70vh")"> <FlexGridColumns> <GridColumn Binding="Name" Width="GridLength.Star" /> <GridColumn Binding="Address" /> <GridColumn Binding="City" /> <GridColumn Binding="OrderCount" Format="N1" Width="150"> <GridColumnAggregateFunctions> <GridAggregateFunction Aggregate="GridAggregate.Minimum" Caption="Min({value})" /> <GridAggregateFunction Aggregate="GridAggregate.Maximum" Caption="Max({value})" /> </GridColumnAggregateFunctions> </GridColumn> <GridColumn Binding="OrderTotal" Format="C" Aggregate="GridAggregate.Sum" /> </FlexGridColumns> <FlexGridColumnFooterRows> <GridSummaryRow /> </FlexGridColumnFooterRows> </FlexGrid> @code { ObservableCollection<Customer> customers; protected override void OnInitialized() { customers = Customer.GetCustomerList(10); } }

Index.razor

コードのコピー

@using C1.Blazor.Grid
@using C1.Blazor.Core
@using System.Collections.ObjectModel;

<FlexGrid AutoGenerateColumns=false ItemsSource="customers" Style="@("max-height:70vh")">
    <FlexGridColumns>
        <GridColumn Binding="Name" Width="GridLength.Star" />
        <GridColumn Binding="Address" />
        <GridColumn Binding="City" />
        <GridColumn Binding="OrderCount" Format="N1" Width="150">
            <GridColumnAggregateFunctions>
                <GridAggregateFunction Aggregate="GridAggregate.Minimum" Caption="Min({value})" />
                <GridAggregateFunction Aggregate="GridAggregate.Maximum" Caption="Max({value})" />
            </GridColumnAggregateFunctions>
        </GridColumn>
        <GridColumn Binding="OrderTotal" Format="C" Aggregate="GridAggregate.Sum" />
    </FlexGridColumns>
    <FlexGridColumnFooterRows>
        <GridSummaryRow />
    </FlexGridColumnFooterRows>
</FlexGrid>

@code {
    ObservableCollection<Customer> customers;

    protected override void OnInitialized()
    {
        customers = Customer.GetCustomerList(10);
    }
}