DxGrid.GroupSummary Property

Contains group summary items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment GroupSummary { get; set; }

Property Value

Type	Description
RenderFragment	A collection of group summary items (UI fragment) that the browser renders in the grid’s markup.

Remarks

The DxGrid calculates group summary values across all records in a group. To create the group summary, declare a DxGridSummaryItem object in the GroupSummary template, and specify the SummaryType and FieldName properties.

You can set the SummaryType property to Custom and handle the CustomSummary event to create a custom summary item.

The Grid displays summary values in the group row after the group header. To show the summary value in the group footer, set the FooterColumnName property to the target column’s name.

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
@* ... *@
<DxGrid Data="GridDataSource"
        UnboundColumnData="Grid_CustomUnboundColumnData"
        ShowGroupPanel="true">
    <Columns>
        <DxGridDataColumn FieldName="Order.ShipName" Caption="Contact Name" />
        <DxGridDataColumn FieldName="Order.ShipCountry" Caption="Country" />
        <DxGridDataColumn FieldName="Order.ShipCity" Caption="City" />
        <DxGridDataColumn FieldName="ProductId" Caption="Product ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="TotalPrice"
                      DisplayFormat="c"
                      UnboundType="GridUnboundColumnType.Decimal" />
    </Columns>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max"
                           ValueDisplayFormat="c"
                           FieldName="UnitPrice" />
    </GroupSummary>
</DxGrid>
@* ... *@
@code {
    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.OrderDetails
            .Include(i => i.Order)
            .Include(i => i.Product)
            .ToList();
    }

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if (e.FieldName == "TotalPrice") {
            var UnitPrice = Convert.ToDecimal(e.GetRowValue("UnitPrice"));
            var Quantity = Convert.ToDecimal(e.GetRowValue("Quantity"));
            var Discount = Convert.ToDecimal(e.GetRowValue("Discount"));
            e.Value = Quantity * UnitPrice * (1 - Discount);
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

OrderDetail

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class OrderDetail {
        public int OrderId { get; set; }
        public int ProductId { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }

        public virtual Order Order { get; set; }
        public virtual Product Product { get; set; }
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<OrderDetail> OrderDetails { get; set; }
        // ...
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<OrderDetail>(entity => {
                entity.HasKey(e => new { e.OrderId, e.ProductId })
                    .HasName("PK_Order_Details");
                entity.ToTable("Order Details");
                entity.HasIndex(e => e.OrderId, "OrderID");
                entity.HasIndex(e => e.OrderId, "OrdersOrder_Details");
                entity.HasIndex(e => e.ProductId, "ProductID");
                entity.HasIndex(e => e.ProductId, "ProductsOrder_Details");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.ProductId).HasColumnName("ProductID");
                entity.Property(e => e.Quantity).HasDefaultValueSql("((1))");
                entity.Property(e => e.UnitPrice).HasColumnType("money");
                entity.HasOne(d => d.Order)
                    .WithMany(p => p.OrderDetails)
                    .HasForeignKey(d => d.OrderId)
                    .OnDelete(DeleteBehavior.ClientSetNull)
                    .HasConstraintName("FK_Order_Details_Orders");
                entity.HasOne(d => d.Product)
                    .WithMany(p => p.OrderDetails)
                    .HasForeignKey(d => d.ProductId)
                    .OnDelete(DeleteBehavior.ClientSetNull)
                    .HasConstraintName("FK_Order_Details_Products");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Startup.cs (.NET 5.0)

using Microsoft.EntityFrameworkCore;
// ...
    public class Startup {
    // ...
        public void ConfigureServices(IServiceCollection services) {
        // ...
            services.AddDbContextFactory<NorthwindContext>((sp, options) => {
                var env = sp.GetRequiredService<IWebHostEnvironment>();
                var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
                options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
            });
        }
        // ...
    }

Program.cs (.NET 6.0)

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

To refresh all group summary values in the Grid component, call the RefreshSummary() method.

Run Demo: Grid - Group Summary Run Demo: Grid - Group Footer Summary

Watch Video: Grid - Summary