How to: Bind the Grid to Total and Group Summaries

• Jan 09, 2023
• 3 minutes to read

This topic describes how to define total and group summaries in a View Model and display them in the GridControl.

View Example: How to Bind the GridControl to Total and Group Summaries Specified in a ViewModel

Specify Summaries in the ViewModel

1. Create a SummaryItemType enumeration that lists summary types you want to display in the GridControl:

   C#

   public enum SummaryItemType { Max, Count, None }
   

   VB.NET

   Public Enum SummaryItemType
       Max
       Count
       None
   End Enum
   

2. Create a class that describes a grid summary:

   C#

   public class Summary : BindableBase {
       public Summary(SummaryItemType type, string fieldname) {
           Type = type;
           FieldName = fieldname;
       }
       public SummaryItemType Type { get; }
       public string FieldName { get; }
   }
   

   VB.NET

   Public Class Summary
       Inherits BindableBase
   
       Public Sub New(ByVal type As SummaryItemType, ByVal fieldname As String)
           Type = type
           FieldName = fieldname
       End Sub
   
       Public ReadOnly Property Type As SummaryItemType
       Public ReadOnly Property FieldName As String
   End Class
   

3. Specify collections of total and group summaries in the ViewModel:

   C#

   public class CustomersViewModel : ViewModelBase {
       public CustomersViewModel() {
           // ...
           TotalSummary = new ObservableCollection<Summary>() {
               new Summary(SummaryItemType.Count, nameof(Customer.Name)),
               new Summary(SummaryItemType.Max, nameof(Customer.Visits))
           };
           GroupSummary = new ObservableCollection<Summary>() {
               new Summary(SummaryItemType.Count, nameof(Customer.Name))
           };
       }
       // ...
       public ObservableCollection<Summary> TotalSummary { get; }
       public ObservableCollection<Summary> GroupSummary { get; }
   }
   

   VB.NET

   Public Class CustomersViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           ' ...
           TotalSummary = New ObservableCollection(Of Summary)() From {
               New Summary(SummaryItemType.Count, NameOf(Customer.Name)),
               New Summary(SummaryItemType.Max, NameOf(Customer.Visits))
           }
           GroupSummary = New ObservableCollection(Of Summary)() From {
               New Summary(SummaryItemType.Count, NameOf(Customer.Name))
           }
       End Sub
   
       ' ...
       Public ReadOnly Property TotalSummary As ObservableCollection(Of Summary)
       Public ReadOnly Property GroupSummary As ObservableCollection(Of Summary)
   End Class
   

   If you want the GridControl to reflect changes made in the TotalSummary and GroupSummary collections, these collections should implement the INotifyCollectionChanged interface.

Create a Summary Template

1. To specify a summary type (Min, Max, or Count), set the SummaryItemBase.SummaryType property to a SummaryItemType enumeration value. Create an ObjectToObjectConverter to map your SummaryItemType enumeration values to the SummaryItemType enumeration values:

   XAML

   <Window ... 
       xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm">
       <Window.Resources>
           <dxmvvm:ObjectToObjectConverter x:Key="SummaryTypeConverter">
               <dxmvvm:MapItem Source="Max" Target="Max" />
               <dxmvvm:MapItem Source="Count" Target="Count" />
               <dxmvvm:MapItem Source="None" Target="None" />
           </dxmvvm:ObjectToObjectConverter>
       </Window.Resources>
       <!-- ... -->
   </Window>
   

2. Create a template that generates summaries.

   Use the SummaryTypeConverter to specify the Converter parameter for the SummaryItemBase.SummaryType property.

   Use the DependencyObjectExtensions.DataContext attached property when you bind the GridControl to summary properties. This attached property synchronizes data updates of bound properties to enhance grid performance:

   XAML

   <Window.Resources>
       <DataTemplate x:Key="SummaryTemplate">
           <ContentControl>
               <dxg:GridSummaryItem FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                                    SummaryType="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Type, RelativeSource={RelativeSource Self}, Converter={StaticResource SummaryTypeConverter}}"/>
           </ContentControl>
       </DataTemplate>
   </Window.Resources>
   

Display ViewModel Summaries in the GridControl

1. Bind the TotalSummarySource and GroupSummarySource properties to total and group summary collections.
2. Set the TotalSummaryGeneratorTemplate and GroupSummaryGeneratorTemplate properties to a template that generates summaries.
3. Set the DataViewBase.TotalSummaryPosition property to Top or Bottom to display the Total Summary Panel.

XAML

<dxg:GridControl ...
                 TotalSummarySource="{Binding TotalSummary}"
                 GroupSummarySource="{Binding GroupSummary}"
                 TotalSummaryGeneratorTemplate="{StaticResource SummaryTemplate}"
                 GroupSummaryGeneratorTemplate="{StaticResource SummaryTemplate}">
    <dxg:GridControl.View>
        <dxg:TableView TotalSummaryPosition="Bottom"/>
    </dxg:GridControl.View>
</dxg:GridControl>