The FlexGrid control provides the ColumnFooters property which gets the column footer cells that can be added to the Columns collection of FlexGrid using its Add method. The Add method takes object of the Column class. The columns are then added into a row using the instance of the GroupRow class. The row is then added in the footer by using the Add method of the Rows collection available in the ColumnFooters property.

Following image displays the column footer in the FlexGrid control having sum of each column:

Perform the following steps to add column footer to the FlexGrid control. This example uses the same data binding method as used in the Data Binding topic:

1. Add the FlexGrid control in the XAML view using the following code:

   XAML	コードのコピー
   <c1:C1FlexGrid Name="_flexBound" Grid.Row="2" ></c1:C1FlexGrid>

   
   
   
2. Switch to the Code view, create AddColumnFooter method for adding a column footer row using the following code:

   C#	コードのコピー
   void AddColumnFooter(C1.WPF.FlexGrid.C1FlexGrid flex) { flex.ColumnFooters.Columns.Add(new Column()); var gr = new C1.WPF.FlexGrid.GroupRow(); // adding the row to the ColumnFooter flex.ColumnFooters.Rows.Add(gr); } }

   
   
   
3. Add the following code in the MainWindow() constructor to populate the Flexgrid control and find the aggregate of columns using the Sum value of the Aggregate enum. The aggregate is then assigned to GroupAggregate property of the Column class to apply on the columns such as Price, Cost, Weight and Volume:
   

   C#

   コードのコピー

   // populate bound grid var products = Product.GetProducts(250); var view = new ListCollectionView(products); _flexBound.ItemsSource = view; // add a column footer row to the bound grid AddColumnFooter(_flexBound); // show aggregate values in subtotal cell foreach (var colName in "Price,Cost,Weight,Volume".Split(',')) { var c = _flexBound.Columns[colName]; c.GroupAggregate = C1.WPF.FlexGrid.Aggregate.Sum; }

In .NET, you can add the column footer easily by using the ColumnFooterRows property of the C1.WPF.Grid.GridRowCollection class which returns the collection of rows to create the rows. A summary row is created in the footer using the GridSummaryRow class to display values.

Moreover, the summary row allows you to configure the aggregate function at runtime using the OptionsMenuVisibility property of the GridSummaryRow class. The OptionsMenuVisibility property calls GridColumnOptionsMenuVisibility enumeration which provides Collapsed, MouseOver or Visible values to hide or display functions as per your requirement. In our case, we have set the value of the OptionsMenuVisibility property to Visible to show the ellipsis(...) button in the footer. You just need to click the ellipsis(...) button for using the aggregate functions. You can apply more than one aggregate function on a particular column. For example, you can find the sum of values and count total values of a particular column by using the Sum and Count functions. The following image shows a summary row with multiple aggregate functions used for calculation:

Perform the following steps to add summary row to the FlexGrid control. In this example, the data binding with FlexGrid control is done using list and dictionaries.

1. Add column footer using the FlexGrid.ColumnFooterRows property and add summary row to the footer using the GridSummaryRow class as shown in the following code snippet:

   C#

   コードのコピー

   <c1:FlexGrid x:Name="grid" HorizontalScrollBarVisibility="Visible" AutoGenerateColumns="False" ColumnFooterFontStyle="Italic" HeadersVisibility="All"> <c1:FlexGrid.Columns> <c1:GridColumn Binding="[Col1]" Format="C2"/> <c1:GridColumn Binding="[Col2]" Format="N2" /> <c1:GridColumn Binding="[Col3]" Format="N0"/> <c1:GridColumn Binding="[Col4]" /> </c1:FlexGrid.Columns> <c1:FlexGrid.ColumnFooterRows> <c1:GridSummaryRow Height="Auto" OptionsMenuVisibility="Visible"/> </c1:FlexGrid.ColumnFooterRows> </c1:FlexGrid>

   
   
   
2. Switch to the Code view and add the following code to add data to the FlexGrid and bind the FlexGrid control with list to show data:

   C#	コードのコピー
   Random _rand = new Random(); public MainWindow() { InitializeComponent(); var list = new List<Dictionary<string, double>>(); for (int i = 0; i < 100; i++) { var dictionary = new Dictionary<string, double>(); for (int j = 1; j <= 4; j++) dictionary[$"Col{j}"] = _rand.NextDouble(); list.Add(dictionary); } grid.ItemSource=list; }

   
   

In case of .NET Framework, the following properties are used to set the appearance of the column footer:

Following image displays a column footer in Maroon background color and White foreground color using the instance of the GroupRow class. The FontStyle and FontWeight properties for the values in column footer can also be changed to Italic and Bold respectively using the same instance:

You can use the following code snippet to set the style of column footer in .NET Framework:

void AddColumnFooter(C1.WPF.FlexGrid.C1FlexGrid flex)
{
    flex.ColumnFooters.Columns.Add(new Column());
    var gr = new C1.WPF.FlexGrid.GroupRow();
    flex.ColumnFooters.Rows.Add(gr);
      gr.FontWeight = FontWeights.Bold;
    gr.FontStyle = FontStyles.Italic;
    gr.Background = new SolidColorBrush(Color.FromArgb(0xff, 0x80, 0x00, 0x00));
    gr.Foreground = new SolidColorBrush(Colors.White);
}

In case of .NET, the following properties are used to set the appearance of the column footer:

Following image displays a column footer in Maroon background color and White foreground color using the ColumnFooterBackground and ColumnFooterForeground properties respectively. The font style of the values in column footer can also be changed to Italic by using the ColumnFooterFontStyle property:

You can use the following code snippet to set the style of column footer in XAML view:

<c1:FlexGrid x:Name="grid" HorizontalScrollBarVisibility="Visible" AutoGenerateColumns="False" ColumnFooterFontStyle="Italic" ColumnFooterBackground="Maroon" ColumnFooterForeground="White" HeadersVisibility="All">
    <c1:FlexGrid.Columns>
        <c1:GridColumn Binding="[Col1]" Format="C2"/>
        <c1:GridColumn Binding="[Col2]" Format="N2"/>
        <c1:GridColumn Binding="[Col3]" Format="N0"/>
        <c1:GridColumn Binding="[Col4]" />
    </c1:FlexGrid.Columns>
    <c1:FlexGrid.ColumnFooterRows>
        <c1:GridSummaryRow Height="Auto" OptionsMenuVisibility="Visible"/>
    </c1:FlexGrid.ColumnFooterRows>
</c1:FlexGrid>