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

Client Summary Calculation

The EnableRealTimeSummaryRecalculation property specifies whether the Grid View control recalculates total and group summaries on the client-side in batch edit mode. To disable client-side recalculation, set this property to false.

The Grid View does not highlight its summaries when their values are recalculated. To highlight recalculated summary values, use the following API:

In this demo module, the control's HighlightSummaryItems property value is set to true and the Grid View colors summary items when their values are changed.

#Product Name Unit Price Quantity Discount Total
Order ID: 10248 (, , )
 Queso Cabrales$14.00120 %$168.00
 Singaporean Hokkien Fried Mee$10.00100 %$100.00
 Mozzarella di Giovanni$35.0050 %$175.00
Order ID: 10249 (, , )
 Tofu$19.0090 %$171.00
 Manjimup Dried Apples$42.00400 %$1,680.00
Order ID: 10250 (, , ) (Continued on the next page)
 Jack's New England Clam Chowder$8.00100 %$80.00
 Manjimup Dried Apples$42.003515 %$1,249.50
Inserted values
Updated values
Deleted values
<dx:BootstrapGridView runat="server" DataSourceID="OrdersDataSource" KeyFieldName="OrderID;ProductID" >
    <SettingsEditing Mode="Batch" BatchEditSettings-HighlightSummaryItems="true" />
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" />
    <Settings ShowFooter="true" />
    <SettingsBehavior AutoExpandAllGroups="true" />
    <ClientSideEvents BatchEditEndEditing="onBatchEditEndEditing" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowCancelButton="true" ShowDeleteButton="true" ShowNewButtonInHeader="false" Width="80px" />
        <dx:BootstrapGridViewDataColumn FieldName="OrderID" GroupIndex="0"/>
        <dx:BootstrapGridViewTextColumn FieldName="ProductName"/>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice" Width="100">
            <PropertiesSpinEdit DisplayFormatString="c" DisplayFormatInEditMode="true" MinValue="0" MaxValue="60000"/>
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="Quantity" Width="100">
            <PropertiesSpinEdit MinValue="0" MaxValue="60000" NumberType="Integer" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="Discount" Width="150">
            <PropertiesSpinEdit MinValue="0" MaxValue="1" DecimalPlaces="2" Increment="0.1" NumberType="Float" DisplayFormatString="p0" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="[UnitPrice] * [Quantity] * (1 - [Discount])">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem FieldName="ProductName" SummaryType="Count" />
        <dx:ASPxSummaryItem FieldName="Discount" SummaryType="Max" DisplayFormat="Max Discount={0:p0}" />
        <dx:ASPxSummaryItem FieldName="Total" SummaryType="Sum" />
    </TotalSummary>
    <GroupSummary>
        <dx:ASPxSummaryItem FieldName="ProductName" SummaryType="Count" />
        <dx:ASPxSummaryItem FieldName="Discount" SummaryType="Max" DisplayFormat="Max Discount={0:p0}" />
        <dx:ASPxSummaryItem FieldName="Total" SummaryType="Sum" />
    </GroupSummary>
</dx:BootstrapGridView>
function onBatchEditEndEditing(s, e) {
    var unitPriceColumn = s.GetColumnByField("UnitPrice");
    var quantityColumn = s.GetColumnByField("Quantity");
    var discountColumn = s.GetColumnByField("Discount");
    var unitPriceValue = s.batchEditApi.GetCellValue(e.visibleIndex, "UnitPrice");
    var quantityValue = s.batchEditApi.GetCellValue(e.visibleIndex, "Quantity");
    var discountValue = s.batchEditApi.GetCellValue(e.visibleIndex, "Discount");
    if (e.rowValues.hasOwnProperty(unitPriceColumn.index))
        unitPriceValue = e.rowValues[unitPriceColumn.index].value;
    if (e.rowValues.hasOwnProperty(quantityColumn.index))
        quantityValue = e.rowValues[quantityColumn.index].value;
    if (e.rowValues.hasOwnProperty(discountColumn.index))
        discountValue = e.rowValues[discountColumn.index].value;
    var newTotalColumnValue = unitPriceValue * quantityValue * (1 - discountValue);
    s.batchEditApi.SetCellValue(e.visibleIndex, "Total", newTotalColumnValue);
}
Screen Size
Color Themes
Demo QR Code