Aggregating Data

Once you group the data, it is often useful to compute aggregate values for the groups. For example, if you group sales data by country or product category, you can display the total sales for each country and product category.

To accomplish this using C1FlexGrid, set the GroupAggregate property on the columns to aggregate, and the grid automatically calculates and displays the aggregates. The aggregates automatically recalculate when the data changes.

Note that the aggregates appear in the group header rows. Set the grid’s AreGroupHeadersFrozen property to false to make them visible.

For example, consider the following grid definition:

XAML	Copy Code
<fg:C1FlexGrid x:Name="_flex" AutoGenerateColumns="False"> <fg:C1FlexGrid.Columns> <fg:Column Header="Line" Binding="{Binding Line}" /> <fg:Column Header="Color" Binding="{Binding Color}" /> <fg:Column Header="Name" Binding="{Binding Name}" /> <fg:Column Header="Price" Binding="{Binding Price}" Format="n2" HorizontalAlignment="Right" Width=""/> <fg:Column Header="Cost" Binding="{Binding Cost}" Format="n2" HorizontalAlignment="Right" Width=""/> <fg:Column Header="Weight" Binding="{Binding Weight}" Format="n2" HorizontalAlignment="Right" Width=""/> <fg:Column Header="Volume" Binding="{Binding Volume}" Format="n2" HorizontalAlignment="Right" Width=""/> </fg:C1FlexGrid.Columns> </fg:C1FlexGrid>

XAML

Copy Code

<fg:C1FlexGrid x:Name="_flex" AutoGenerateColumns="False">
  <fg:C1FlexGrid.Columns>
    <fg:Column Header="Line" Binding="{Binding Line}" />
    <fg:Column Header="Color" Binding="{Binding Color}" />
    <fg:Column Header="Name" Binding="{Binding Name}" />
    <fg:Column Header="Price" Binding="{Binding Price}"
      Format="n2" HorizontalAlignment="Right" Width="*"/>
    <fg:Column Header="Cost" Binding="{Binding Cost}"
      Format="n2" HorizontalAlignment="Right" Width="*"/>
    <fg:Column Header="Weight" Binding="{Binding Weight}"
      Format="n2" HorizontalAlignment="Right" Width="*"/>
    <fg:Column Header="Volume" Binding="{Binding Volume}"
      Format="n2" HorizontalAlignment="Right" Width="*"/>
  </fg:C1FlexGrid.Columns>
</fg:C1FlexGrid>

If you set the grid’s ItemsSource property to an ICollectionView object configured to group the data by “Line,” “Color,” and “Name,” you get a grid that looks like this:

The grid shows the groups in a collapsible outline format and automatically displays the number of items in each group. This is similar to the view that the Microsoft DataGrid control displays.

The C1FlexGrid lets you go one step further and display aggregate values for the columns. For example, to display totals for the “Price,” “Cost,” “Weight,” and “Volume” columns, modify the XAML above as follows:

XAML	Copy Code
<fg:C1FlexGrid x:Name="_flex" AutoGenerateColumns="False" AreRowGroupHeadersFrozen="False"> <fg:C1FlexGrid.Columns> <fg:Column Header="Line" Binding="{Binding Line}" /> <fg:Column Header="Color" Binding="{Binding Color}" /> <fg:Column Header="Name" Binding="{Binding Name}" /> <fg:Column Header="Price" Binding="{Binding Price}" Format="n2" HorizontalAlignment="Right" Width="" GroupAggregate="Sum"/> <fg:Column Header="Cost" Binding="{Binding Cost}" Format="n2" HorizontalAlignment="Right" Width="" GroupAggregate="Sum"/> <fg:Column Header="Weight" Binding="{Binding Weight}" Format="n2" HorizontalAlignment="Right" Width="" GroupAggregate="Sum"/> <fg:Column Header="Volume" Binding="{Binding Volume}" Format="n2" HorizontalAlignment="Right" Width="" GroupAggregate="Sum"/> </fg:C1FlexGrid.Columns> </fg:C1FlexGrid>

XAML

Copy Code

<fg:C1FlexGrid x:Name="_flex" AutoGenerateColumns="False"
  AreRowGroupHeadersFrozen="False">
  <fg:C1FlexGrid.Columns>
    <fg:Column Header="Line" Binding="{Binding Line}" />
    <fg:Column Header="Color" Binding="{Binding Color}" />
    <fg:Column Header="Name" Binding="{Binding Name}" />
    <fg:Column Header="Price" Binding="{Binding Price}"
      Format="n2" HorizontalAlignment="Right" Width="*"
      GroupAggregate="Sum"/>
    <fg:Column Header="Cost" Binding="{Binding Cost}"
      Format="n2" HorizontalAlignment="Right" Width="*"
      GroupAggregate="Sum"/>
    <fg:Column Header="Weight" Binding="{Binding Weight}"
      Format="n2" HorizontalAlignment="Right" Width="*"
      GroupAggregate="Sum"/>
    <fg:Column Header="Volume" Binding="{Binding Volume}"
      Format="n2" HorizontalAlignment="Right" Width="*"
      GroupAggregate="Sum"/>
  </fg:C1FlexGrid.Columns>
</fg:C1FlexGrid>

This XAML code contains two changes:

It sets the grid’s AreGroupHeadersFrozen to false. This is necessary because the group aggregates appear in the group header rows, and if the headers are frozen then the aggregates are not visible.
It sets the GroupAggregate property on several columns to “Sum.” This causes the grid to calculate and display the aggregate in the group header rows. Several aggregates are available, including “Sum,” “Average,” “Count,” “Minimum," “Maximum,” etc.

After making this change, the grid looks like this:

Notice how the group headers now display the aggregate value for the groups. The aggregate values automatically recalculate when the data changes.

WPF Reference

External Links

Silverlight Reference