Total Summary

The Grid View control supports both total and group summaries.

A total summary represents the value of an aggregate function calculated over all rows within the grid and is displayed within the grid footer, provided that the Settings.ShowFooter option is enabled. The Grid View stores its total summary items in the TotalSummary collection.

Company Name Unit Price Quantity Total
Vins et alcools Chevalier$14.0012$168.00
Vins et alcools Chevalier$10.0010$100.00
Vins et alcools Chevalier$35.005$175.00
Toms Spezialitäten$19.009$171.00
Toms Spezialitäten$42.0040$1,680.00
Hanari Carnes$8.0010$80.00
Hanari Carnes$42.0035$1,470.00
Hanari Carnes$17.0015$255.00
Victuailles en stock$17.006$102.00
Victuailles en stock$16.0015$240.00
<dx:BootstrapGridView runat="server" DataSourceID="CompaniesOrdersDataSource" KeyFieldName="OrderID">
    <Settings ShowFooter="True" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Quantity" />
        <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="UnitPrice * Quantity">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem FieldName="CompanyName" SummaryType="Count" />
        <dx:ASPxSummaryItem FieldName="Total" SummaryType="Sum" />
    </TotalSummary>
</dx:BootstrapGridView>

Group Summary

The Grid View control supports both total and group summaries.

A group summary represents the summary value calculated within a single group and is displayed in the group row or group footer. Group summaries are stored in the GroupSummary collection.

Company Name Region Unit Price Quantity Total
Country: Argentina (Sum=$8,158.00, Count=34)
Country: Austria (Sum=$139,924.00, Count=125)
 City: Graz (Sum=$113,561.00, Count=102)
 City: Salzburg (Sum=$26,363.00, Count=23)
Country: Belgium (Sum=$35,122.00, Count=56)
Country: Brazil (Sum=$115,121.00, Count=203)
Country: Canada (Sum=$55,358.00, Count=75)
Country: Denmark (Sum=$34,800.00, Count=46)
Country: Finland (Sum=$19,780.00, Count=54)
Country: France (Sum=$85,624.00, Count=184)
<dx:BootstrapGridView runat="server" DataSourceID="CompaniesOrdersDataSource" KeyFieldName="OrderID">
    <Settings ShowGroupPanel="True" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="Country" GroupIndex="0" />
        <dx:BootstrapGridViewDataColumn FieldName="City" GroupIndex="1" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" />
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Quantity" />
        <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="UnitPrice * Quantity">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
    <GroupSummary>
        <dx:ASPxSummaryItem FieldName="Total" SummaryType="Sum" />
        <dx:ASPxSummaryItem FieldName="CompanyName" SummaryType="Count" />
    </GroupSummary>
</dx:BootstrapGridView>

Custom Summary

The Grid View control allows you to calculate total and group summaries based on a custom logic. Use the following steps to create a custom summary:

  1. Add a new summary item whose SummaryType is set to Custom.
  2. Subscribe to the CustomSummaryCalculate event. This even fires once for every custom summary item.
  3. In the event handler, implement a custom summary calculation logic based on your needs. Assign the summary calculation result to the TotalValue event argument.
Company Name Unit Price Quantity Total Currency
Country: Argentina (Sum EUR: 664.00; Sum USD: 421.00)
Country: Austria (Sum EUR: 1,983.00; Sum USD: 1,499.00)
Country: Belgium (Sum EUR: 762.00; Sum USD: 579.00)
 City: Bruxelles (Sum EUR: 290.00; Sum USD: 207.00)
 City: Charleroi (Sum EUR: 472.00; Sum USD: 372.00)
Country: Brazil (Sum EUR: 3,061.00; Sum USD: 2,274.00)
Country: Canada (Sum EUR: 1,028.00; Sum USD: 882.00)
Country: Denmark (Sum EUR: 605.00; Sum USD: 608.00)
Country: Finland (Sum EUR: 699.00; Sum USD: 594.00)
Country: France (Sum EUR: 2,533.00; Sum USD: 2,317.00)
<dx:BootstrapGridView ID="GridViewCustomSummary" OnCustomSummaryCalculate="GridViewCustomSummary_CustomSummaryCalculate" OnCustomUnboundColumnData="GridViewCustomSummary_CustomUnboundColumnData" runat="server" DataSourceID="CompaniesOrdersDataSource" KeyFieldName="OrderID">
    <Settings ShowGroupPanel="true" ShowFooter="true" />
    <SettingsBehavior AutoExpandAllGroups="false" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="Country" GroupIndex="0" />
        <dx:BootstrapGridViewDataColumn FieldName="City" GroupIndex="1" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" Width="40%" />
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Quantity" />
        <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal" Width="20%" UnboundExpression="UnitPrice * Quantity">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Currency" Width="10%" UnboundType="String" ReadOnly="True">
            <SettingsEditForm Visible="False" />
        </dx:BootstrapGridViewDataColumn>
    </Columns>
    <GroupSummary>
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Custom" />
    </GroupSummary>
    <TotalSummary>
        <dx:ASPxSummaryItem FieldName="Total" ShowInColumn="Total" SummaryType="Custom" />
    </TotalSummary>
</dx:BootstrapGridView>
decimal usd, eur;
protected void GridViewCustomSummary_CustomSummaryCalculate(object sender, DevExpress.Data.CustomSummaryEventArgs e) {
    if (e.IsGroupSummary) {
        if (e.SummaryProcess == DevExpress.Data.CustomSummaryProcess.Start) {
            usd = 0;
            eur = 0;
        } else if (e.SummaryProcess == DevExpress.Data.CustomSummaryProcess.Calculate) {
            string currency = e.GetValue("Currency").ToString();
            if (currency == "USD")
                usd += Convert.ToDecimal(e.GetValue("UnitPrice"));
            else if (currency == "EUR")
                eur += Convert.ToDecimal(e.GetValue("UnitPrice"));
        } else if (e.SummaryProcess == DevExpress.Data.CustomSummaryProcess.Finalize) {
            e.TotalValue = string.Format("Sum EUR: {0}; Sum USD: {1}", FormatDecimal(eur), FormatDecimal(usd));
        }
    } else if (e.IsTotalSummary) {
        if (e.SummaryProcess == DevExpress.Data.CustomSummaryProcess.Start) {
            usd = 0;
            eur = 0;
        } else if (e.SummaryProcess == DevExpress.Data.CustomSummaryProcess.Calculate) {
            string currency = e.GetValue("Currency").ToString();
            if (currency == "USD")
                usd += Convert.ToDecimal(e.GetValue("Total"));
            else if (currency == "EUR")
                eur += Convert.ToDecimal(e.GetValue("Total"));
        } else if (e.SummaryProcess == DevExpress.Data.CustomSummaryProcess.Finalize) {
            e.TotalValue = string.Format("Total €{0}; ${1}", FormatDecimal(eur), FormatDecimal(usd));
        }
    }
}
string FormatDecimal(decimal value) {
    return string.Format("{0:n}", value);
}
protected void GridViewCustomSummary_CustomUnboundColumnData(object sender, DevExpress.Web.Bootstrap.BootstrapGridViewColumnDataEventArgs e) {
    if (e.Column.FieldName == "Currency")
        e.Value = e.ListSourceRowIndex % 2 == 0 ? "USD" : "EUR";
}
Screen Size
Color Themes
Demo QR Code