Total Summary

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 ShowFooter option is enabled (available through Settings). The TotalSummary method allows you to add a total summary item.

Use a summary item's FieldName method to specify a data field which will be used for summary calculation. The summary is displayed in the column specified using the FieldName method. You can also use the ShowInColumn method to explicitly specify the column that should display the summary.

There are five predefined aggregate functions that you can use to calculate summaries: Sum, Min, Max, Average, and Count. You can define the summary type for each summary item using the SummaryType method.

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
@(Html.DevExpress()
    .BootstrapGridView("gridTotalSummary")
    .KeyFieldName("OrderID")
    .Settings(settings => settings.ShowFooter(true))
    .Columns(columns => {
        columns
            .Add()
            .FieldName("CompanyName");
        columns
            .AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(properties => properties.DisplayFormatString("c"));
        columns
            .Add()
            .FieldName("Quantity");
        columns
            .AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("UnitPrice * Quantity")
            .PropertiesTextEdit(properties => properties.DisplayFormatString("c"));
    })
    .TotalSummary(summary => {
        summary
            .Add()
            .FieldName("CompanyName")
            .SummaryType(SummaryItemType.Count);
        summary
            .Add()
            .FieldName("Total")
            .SummaryType(SummaryItemType.Sum);
    })
    .Routes(routes => routes
    .MapRoute(r => r
        .Controller("GridView")
        .Action("TotalSummary")))
    .Bind(Model))
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult TotalSummary() {
            return PartialView("Summary/TotalSummary", NorthwindContext.GetInvocesSummary());
        }
    }
}

Group Summary

A group summary represents the summary value calculated within a single group and is displayed in the group row or group footer. Group summaries can be added using the GroupSummary method.

The FieldName method to specify a data field which will be used to summary calculating.

There are five predefined aggregate functions that you can use to calculate summaries: Sum, Min, Max, Average, and Count. You can define the summary type for each summary item using the SummaryType method.

Company Name Region Unit Price Quantity Total
Country: Argentina (Sum=$8,158.00, Count=34)
Country: Austria (Sum=$139,924.00, Count=125)
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)
Country: Germany (Sum=$244,614.00, Count=328)
Country: Ireland (Sum=$57,393.00, Count=55)
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridGroupSummary")
    .Settings(settings => settings.ShowGroupPanel(true))
    .KeyFieldName("OrderID")
    .Columns(columns => {
        columns
            .Add()
            .FieldName("Country")
            .GroupIndex(0);
        columns
            .Add()
            .FieldName("City")
            .GroupIndex(1);
        columns
            .Add()
            .FieldName("CompanyName");
        columns
            .Add()
            .FieldName("Region");
        columns
            .AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(properties => properties.DisplayFormatString("c"));
        columns
            .Add()
            .FieldName("Quantity");
        columns
            .AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("UnitPrice * Quantity")
            .PropertiesTextEdit(properties => properties.DisplayFormatString("c"));
    })
    .GroupSummary(summary => {
        summary
            .Add()
            .FieldName("Total")
            .SummaryType(SummaryItemType.Sum);
        summary
            .Add()
            .FieldName("CompanyName")
            .SummaryType(SummaryItemType.Count);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("GroupSummary")))
    .Bind(Model))
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult GroupSummary() {
            return PartialView("Summary/GroupSummary", NorthwindContext.GetInvocesSummary());
        }
    }
}

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 Value event argument.
Company Name Region 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) (Continued on the next page)
 City: Bruxelles (Sum EUR: 290.00; Sum USD: 207.00) (Continued on the next page)
  Maison Dewey 2414336EUR
  Maison Dewey 1320260USD
  Maison Dewey 3610360EUR
  Maison Dewey 4620920EUR
  Maison Dewey 3515525USD
  Maison Dewey 1412168USD
@model IEnumerable
@{
    CustomSummaryCalculator calculator = new CustomSummaryCalculator();
}
@(Html.DevExpress()
    .BootstrapGridView("gridCustomSummary")
    .GroupSummary(groupSummary => {
        groupSummary
            .Add()
            .FieldName("UnitPrice")
            .SummaryType(SummaryItemType.Custom);
    })
    .TotalSummary(totalSummary => {
        totalSummary
            .Add()
            .FieldName("Total")
            .SummaryType(SummaryItemType.Custom);
    })
    .OnCustomSummaryCalculate((s, e) => {
        if(e.IsGroupSummary) {
            calculator.Calculate(e, "UnitPrice", "Sum EUR: {0}; Sum USD: {1}");
        }
        else if(e.IsTotalSummary) {
            calculator.Calculate(e, "Total", "Total EUR: {0}; USD: {1}");
        }
    })
    .OnCustomUnboundColumnData((s, e) => {
        if(e.Column.FieldName == "Currency")
            e.Value = e.ListSourceRowIndex % 2 == 0 ? "USD" : "EUR";
    })
    .Settings(settings => settings.ShowGroupPanel(true).ShowFooter(true))
    .KeyFieldName("OrderID")
    .Columns(columns => {
        columns
            .Add()
            .FieldName("Country")
            .GroupIndex(0);
        columns
            .Add()
            .FieldName("City")
            .GroupIndex(1);
        columns
            .Add()
            .FieldName("CompanyName");
        columns
            .Add()
            .FieldName("Region");
        columns
            .AddTextColumn()
            .FieldName("UnitPrice");
        columns
            .Add()
            .FieldName("Quantity");
        columns
            .AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("UnitPrice * Quantity");
        columns
            .AddTextColumn()
            .FieldName("Currency")
            .UnboundType(UnboundColumnType.String)
            .SettingsEditForm(se => se.Visible(false));
            })
    .OnInitialized((s, e) => {
        s.ExpandRow(2, true);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("CustomSummary")))
    .Bind(Model))
using DevExpress.AspNetCore.Bootstrap;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace DevExpress.AspNetCore.Demos {
    public class CustomSummaryCalculator {
        private decimal USD { get; set; }
        private decimal EUR { get; set; }

        public void Calculate(IBootstrapGridViewCustomSummaryEventArgs e, string targetFieldName, string totalValue) {
            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(targetFieldName));
                else if(currency == "EUR")
                    EUR += Convert.ToDecimal(e.GetValue(targetFieldName));
            }
            else if(e.SummaryProcess == DevExpress.Data.CustomSummaryProcess.Finalize) {
                e.TotalValue = string.Format(totalValue, FormatDecimal(EUR), FormatDecimal(USD));
            }
        }

        static string FormatDecimal(decimal value) {
            return $"{value:n}";
        }
    }
}
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult CustomSummary() {
            return PartialView("Summary/CustomSummary", NorthwindContext.GetInvocesSummary());
        }
    }
}
Screen Size
Color Themes
Demo QR Code