How to: Bind the Grid to Total and Group Summaries

  • 3 minutes to read

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

DevExpress WPF | Grid Control - MVVM Summaries

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:

    public enum SummaryItemType { Max, Count, None }
    
  2. Create a class that describes a grid summary:

    public class Summary : BindableBase {
        public Summary(SummaryItemType type, string fieldname) {
            Type = type;
            FieldName = fieldname;
        }
        public SummaryItemType Type { get; }
        public string FieldName { get; }
    }
    
  3. Specify collections of total and group summaries in the ViewModel:

    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; }
    }
    

    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:

    <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:

    <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.ShowTotalSummary property to true to display the Total Summary Panel.
<dxg:GridControl ...
                 TotalSummarySource="{Binding TotalSummary}"
                 GroupSummarySource="{Binding GroupSummary}"
                 TotalSummaryGeneratorTemplate="{StaticResource SummaryTemplate}"
                 GroupSummaryGeneratorTemplate="{StaticResource SummaryTemplate}">
    <dxg:GridControl.View>
        <dxg:TableView ShowTotalSummary="True"/>
    </dxg:GridControl.View>
</dxg:GridControl>
See Also