Grid View for ASP.NET Web Forms - How to use group footer and footer templates to customize group and total summaries

This example demonstrates how to create group footer and footer templates to replace default group and total summary items with average column values.

Overview

Specify the grid's TotalSummary and GroupSummary properties. For summary items in the Vote column, specify their Tag properties to access these items on the server.

<TotalSummary>
    <dx:ASPxSummaryItem FieldName="Vote" SummaryType="Average" Tag="TotalVote" />
    <dx:ASPxSummaryItem FieldName="BirthDate" SummaryType="Count" />
</TotalSummary>
<GroupSummary>
    <dx:ASPxSummaryItem FieldName="Vote" ShowInGroupFooterColumn="Vote" SummaryType="Average" Tag="GroupVote" />
    <dx:ASPxSummaryItem FieldName="BirthDate" ShowInGroupFooterColumn="BirthDate" SummaryType="Count" />
</GroupSummary>

Specify the grid's GroupFooterTemplate and FooterTemplate properties and add progress bars to the templates to replace default summary items and display average values in the Vote column.

<dx:GridViewDataProgressBarColumn FieldName="Vote">
    <PropertiesProgressBar Minimum="0" Maximum="5" DisplayMode="Position" Width="150" />
    <GroupFooterTemplate>
        <dx:ASPxProgressBar ID="GroupProgressBar" runat="server" Minimum="0" Maximum="5" DisplayMode="Custom" 
            Width="150" CustomDisplayFormat="Avg={0}" DisplayFormatString="{0:N2}" 
            Value='<%# GetGroupSummaryValue(Container) %>' />
    </GroupFooterTemplate>
    <FooterTemplate>
        <dx:ASPxProgressBar ID="TotalProgressBar" runat="server" Minimum="0" Maximum="5" DisplayMode="Custom" 
            Width="150" CustomDisplayFormat="Avg={0}" DisplayFormatString="{0:N2}"
            Value='<%# GetTotalSummaryValue() %>' />
    </FooterTemplate>
</dx:GridViewDataProgressBarColumn>

To get summary items' values, call the grid's server-side GetGroupSummaryValue and GetTotalSummaryValue methods as follows:

protected object GetGroupSummaryValue(GridViewGroupFooterCellTemplateContainer container) {
    var summaryItem = Grid.GroupSummary.First(i => i.Tag == "GroupVote");
    return Grid.GetGroupSummaryValue(container.VisibleIndex, summaryItem);
}
protected object GetTotalSummaryValue() {
    var summaryItem = Grid.TotalSummary.First(i => i.Tag == "TotalVote");
    return Grid.GetTotalSummaryValue(summaryItem);
}

To customize a progress bar's display mode, set the control's DisplayMode property to Custom and specify the CustomDisplayFormat property.

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Grid View Templates
• Grid Data Summaries