DxGridSummaryItem Class

A summary item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxGridSummaryItem :
    ParameterTrackerSettingsComponent,
    IGridSummaryItem

Remarks

The DxGrid allows you to add total and group summaries. Each summary can contain predefined and custom summary items.

Add a Predefined Summary Item

1. Add a DxGridSummaryItem object to the TotalSummary or GroupSummary collection.

2. Specify the summary item’s SummaryType and FieldName properties.
   For the Count function, you can use either the FieldName or FooterColumnName property to specify which column displays the summary value.

<DxGrid Data="@Data" ShowGroupPanel="true" >
    <Columns>
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="Country" GroupIndex="0" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c"/>
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Total"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="[UnitPrice] * [Quantity]"
                          DisplayFormat="c" />
    </Columns>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="CompanyName" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" />
    </GroupSummary>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="CompanyName" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Avg" FieldName="Quantity" ValueDisplayFormat="0.00" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" />
    </TotalSummary>
</DxGrid>

Run Demo: Grid - Total Summary Run Demo: Grid - Group Summary

Watch Video: Grid - Summary

Add a Custom Summary Item

1. Add a DxGridSummaryItem object to the TotalSummary or GroupSummary collection and specify the item’s FieldName property.

2. Set the SummaryType property to Custom to use a custom algorithm to calculate a custom summary value.

3. Handle the CustomSummary event to implement the summary calculation algorithm.

   The summary calculation consists of three stages:

   • Initialization

     The CustomSummary event fires once at this stage. The event’s SummaryStage property value is Start. Use this stage to initialize a summary value (for example, reset internal counters).

   • Calculation

     The CustomSummary event fires for each data row in a grid or in a group. The event’s SummaryStage property value is Calculate. Use this stage to calculate a summary value.

     You can set the TotalValueReady property to true at the Initialization stage to skip the Calculation stage and calculate a custom summary at the Initialization or Finalization stage.

   • Finalization

     The CustomSummary event fires once at this stage. The event’s SummaryStage property value is Finalize. Use this stage to assign the calculated summary value to the TotalValue property.

4. Call the grid’s RefreshSummary() method to update summary values.

Note

Custom summary calculation is limited when you use a Server Mode data source. The CustomSummary event fires only once, when the SummaryStage event argument is set to Finalize.

The Grid does not support custom summary calculation when you use a GridDevExtremeDataSource.

In the following example, the custom summary calculates the sum of Total values against selected Grid rows:

Run Demo: Grid - Custom Summary

<DxGrid @ref="Grid"
        Data="@Data"
        SelectedDataItems="@SelectedDataItems"
        SelectedDataItemsChanged="Grid_SelectedDataItemsChanged"
        CustomSummary="Grid_CustomSummary"
        CustomizeSummaryDisplayText="Grid_CustomizeSummaryDisplayText">
    <Columns>
        <DxGridSelectionColumn />
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID"/>
        <DxGridDataColumn FieldName="CustomerId" Caption="Customer">
            <EditSettings>
                <DxComboBoxSettings Data="Customers" ValueFieldName="CustomerId" TextFieldName="ContactName"/>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="OrderDate" />
        <DxGridDataColumn FieldName="ShipCountry" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="ShippedDate" />
        <DxGridDataColumn FieldName="Total" DisplayFormat="c" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Custom" Name="Custom" FieldName="Total" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                           FieldName="Total"
                           DisplayText="Grand Total: {0}"
                           ValueDisplayFormat="c0" />
    </TotalSummary>
</DxGrid>

@code {
    IEnumerable<object> Data { get; set; }
    IReadOnlyList<Customer> Customers { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }
    IGrid Grid { get; set; }
    @* ... *@
    void Grid_CustomSummary(GridCustomSummaryEventArgs e) {
        switch(e.SummaryStage) {
            case GridCustomSummaryStage.Start:
                e.TotalValue = 0m;
                break;
            case GridCustomSummaryStage.Calculate:
                if(e.Grid.IsDataItemSelected(e.DataItem))
                    e.TotalValue = (decimal)e.TotalValue + (decimal)e.GetRowValue("Total");
                break;
        }
    }
    void Grid_CustomizeSummaryDisplayText(GridCustomizeSummaryDisplayTextEventArgs e) {
        if(e.Item.Name == "Custom")
            e.DisplayText = string.Format("Sum of Selected ({0}): {1:c0}", SelectedDataItems.Count, e.Value);
    }
    void Grid_SelectedDataItemsChanged(IReadOnlyList<object> newSelection) {
        SelectedDataItems = newSelection;
        Grid.RefreshSummary();
    }
}

Format a Summary

The summary’s default display text can contain the summary function, summary value and a name of a column whose values are summarized. What to display in the summary depends on a summary function and a column under which the summary is located.

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        ShowGroupPanel="true"
        UnboundColumnData="Grid_CustomUnboundColumnData">
    <Columns>
        <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="c0"
                      UnboundType="GridUnboundColumnType.Decimal" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Quantity" FooterColumnName="TotalPrice" />
    </TotalSummary>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="ProductId" />
    </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();
    }
}

OrderDetails

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

Order

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class Order {
        public Order() {
            OrderDetails = new HashSet<OrderDetail>();
        }

        public int OrderId { get; set; }
        public string CustomerId { get; set; }
        public int? EmployeeId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public int? ShipVia { get; set; }
        public decimal? Freight { get; set; }
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }

        public virtual Customer Customer { get; set; }
        public virtual Shipper ShipViaNavigation { get; set; }
        public virtual ICollection<OrderDetail> OrderDetails { 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<Order> Orders { get; set; }
        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.Entity<Order>(entity => {
                entity.HasIndex(e => e.CustomerId, "CustomerID");
                entity.HasIndex(e => e.CustomerId, "CustomersOrders");
                entity.HasIndex(e => e.EmployeeId, "EmployeeID");
                entity.HasIndex(e => e.EmployeeId, "EmployeesOrders");
                entity.HasIndex(e => e.OrderDate, "OrderDate");
                entity.HasIndex(e => e.ShipPostalCode, "ShipPostalCode");
                entity.HasIndex(e => e.ShippedDate, "ShippedDate");
                entity.HasIndex(e => e.ShipVia, "ShippersOrders");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.CustomerId)
                    .HasMaxLength(5)
                    .HasColumnName("CustomerID")
                    .IsFixedLength(true);
                entity.Property(e => e.EmployeeId).HasColumnName("EmployeeID");
                entity.Property(e => e.Freight)
                    .HasColumnType("money")
                    .HasDefaultValueSql("((0))");
                entity.Property(e => e.OrderDate).HasColumnType("datetime");
                entity.Property(e => e.RequiredDate).HasColumnType("datetime");
                entity.Property(e => e.ShipAddress).HasMaxLength(60);
                entity.Property(e => e.ShipCity).HasMaxLength(15);
                entity.Property(e => e.ShipCountry).HasMaxLength(15);
                entity.Property(e => e.ShipName).HasMaxLength(40);
                entity.Property(e => e.ShipPostalCode).HasMaxLength(10);
                entity.Property(e => e.ShipRegion).HasMaxLength(15);
                entity.Property(e => e.ShippedDate).HasColumnType("datetime");
                entity.HasOne(d => d.Customer)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.CustomerId)
                    .HasConstraintName("FK_Orders_Customers");
                entity.HasOne(d => d.ShipViaNavigation)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.ShipVia)
                    .HasConstraintName("FK_Orders_Shippers");
            });
            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);
    }
}

Program.cs

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

Use the following API members to modify display text strings of summary items:

ValueDisplayFormat

Specifies format pattern for the summary value.

DisplayText

Specifies display text pattern for the summary item. A display text string can include static text and placeholders for summary value and column caption.

CustomizeSummaryDisplayText

Handle this event to customize display text for an individual calculated summary value. The Grid event argument allows you to obtain information about the Grid’s current state and add this information to a summary item’s display text.

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
@* ... *@
<DxGrid Data="GridDataSource"
        UnboundColumnData="Grid_CustomUnboundColumnData"
        CustomizeSummaryDisplayText="Grid_CustomizeSummaryDisplayText"
        ShowGroupPanel="true">
    <Columns>
        <DxGridDataColumn FieldName="Order.ShipCountry" Caption="Country" />
        <DxGridDataColumn FieldName="Order.ShipCity" Caption="City" />
        <DxGridDataColumn FieldName="ProductId" Caption="Product ID"/>
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" />
        <DxGridDataColumn FieldName="TotalPrice"
                      UnboundType="GridUnboundColumnType.Decimal" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                           FieldName="TotalPrice"
                           ValueDisplayFormat="C0"/>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count"
                           Name="CustomTotal"
                           FieldName="ProductId"
                           FooterColumnName="TotalPrice"/>
    </TotalSummary>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count"
                           Name="CustomGroup"
                           FieldName="ProductId" />
    </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_CustomizeSummaryDisplayText(GridCustomizeSummaryDisplayTextEventArgs e) {
        if (e.Item.Name == "CustomTotal") {
            e.DisplayText = string.Format("Total Rows: {0:N0}", e.Value);
        }
        else if (e.Item.Name == "CustomGroup") {
            e.DisplayText = string.Format("Rows in Group: {0}", e.Value);
        }
    }

    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();
    }
}

OrderDetails

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

Order

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class Order {
        public Order() {
            OrderDetails = new HashSet<OrderDetail>();
        }

        public int OrderId { get; set; }
        public string CustomerId { get; set; }
        public int? EmployeeId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public int? ShipVia { get; set; }
        public decimal? Freight { get; set; }
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }

        public virtual Customer Customer { get; set; }
        public virtual Shipper ShipViaNavigation { get; set; }
        public virtual ICollection<OrderDetail> OrderDetails { 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<Order> Orders { get; set; }
        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.Entity<Order>(entity => {
                entity.HasIndex(e => e.CustomerId, "CustomerID");
                entity.HasIndex(e => e.CustomerId, "CustomersOrders");
                entity.HasIndex(e => e.EmployeeId, "EmployeeID");
                entity.HasIndex(e => e.EmployeeId, "EmployeesOrders");
                entity.HasIndex(e => e.OrderDate, "OrderDate");
                entity.HasIndex(e => e.ShipPostalCode, "ShipPostalCode");
                entity.HasIndex(e => e.ShippedDate, "ShippedDate");
                entity.HasIndex(e => e.ShipVia, "ShippersOrders");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.CustomerId)
                    .HasMaxLength(5)
                    .HasColumnName("CustomerID")
                    .IsFixedLength(true);
                entity.Property(e => e.EmployeeId).HasColumnName("EmployeeID");
                entity.Property(e => e.Freight)
                    .HasColumnType("money")
                    .HasDefaultValueSql("((0))");
                entity.Property(e => e.OrderDate).HasColumnType("datetime");
                entity.Property(e => e.RequiredDate).HasColumnType("datetime");
                entity.Property(e => e.ShipAddress).HasMaxLength(60);
                entity.Property(e => e.ShipCity).HasMaxLength(15);
                entity.Property(e => e.ShipCountry).HasMaxLength(15);
                entity.Property(e => e.ShipName).HasMaxLength(40);
                entity.Property(e => e.ShipPostalCode).HasMaxLength(10);
                entity.Property(e => e.ShipRegion).HasMaxLength(15);
                entity.Property(e => e.ShippedDate).HasColumnType("datetime");
                entity.HasOne(d => d.Customer)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.CustomerId)
                    .HasConstraintName("FK_Orders_Customers");
                entity.HasOne(d => d.ShipViaNavigation)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.ShipVia)
                    .HasConstraintName("FK_Orders_Shippers");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Program.cs

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

Show/Hide a Summary

Use a summary item’s Visible property to specify item visibility in code.

The code snippet below uses the Visible property to hide default group summaries and displays these summaries in group row tooltips instead.

Razor

    @implements IDisposable
    @inject NwindDataService NwindDataService

        <DxGrid @ref="Grid"
                Data="@Data"
                ShowGroupPanel="true"
                CustomizeElement="Grid_CustomizeElement"
                SizeMode="Params.SizeMode"
                ColumnResizeMode="GridColumnResizeMode.NextColumn" 
                TextWrapEnabled="false"
                VirtualScrollingEnabled="true">
            <Columns>
                <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
                <DxGridDataColumn FieldName="City" Width="10%" />
                <DxGridDataColumn FieldName="Region" Width="10%" />
                <DxGridDataColumn FieldName="Country" Name="Country" Width="10%" GroupIndex="0" />
                <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%" />
                <DxGridDataColumn FieldName="Quantity" MinWidth="80" Width="10%" />
                <DxGridDataColumn FieldName="Total"
                                  Name="Total"
                                  UnboundType="GridUnboundColumnType.Decimal"
                                  UnboundExpression="[UnitPrice] * [Quantity]"
                                  DisplayFormat="c"
                                  MinWidth="100"
                                  Width="15%" />
            </Columns>
            <GroupSummary>
                <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Country" Visible="false" />
                <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" Visible="false" />
            </GroupSummary>
        </DxGrid>
@code {
    object Data { get; set; }
    IGrid Grid { get; set; }
    readonly TaskCompletionSource<bool> dataLoadedTcs = new(TaskCreationOptions.RunContinuationsAsynchronously);

    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var customers = await NwindDataService.GetCustomersAsync();
        Data = invoices.OrderBy(i => i.OrderDate).Join(customers, i => i.CustomerId, c => c.CustomerId, (i, c) => {
            return new {
                CompanyName = c.CompanyName,
                City = i.City,
                Region = i.Region,
                Country = i.Country,
                UnitPrice = i.UnitPrice,
                Quantity = i.Quantity
            };
        });
        dataLoadedTcs.TrySetResult(true);
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender) {
            await dataLoadedTcs.Task;
            Grid.ExpandGroupRow(1);
        }
    }
    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.DataRow && (System.Decimal)e.Grid.GetRowValue(e.VisibleIndex, "Total") > 1000) {
            e.CssClass = "highlighted-item";
        }
        if(e.ElementType == GridElementType.DataCell && e.Column.Name == "Total") {
            e.Style = "font-weight: 800";
        }
        if(e.ElementType == GridElementType.GroupRow && e.Column.Name == "Country") {
            var summaryItems = e.Grid.GetGroupSummaryItems().Select(i => e.Grid.GetGroupSummaryDisplayText(i, e.VisibleIndex));
            e.Attributes["title"] = string.Join(", ", summaryItems);
        }
    }
    public void Dispose() {
        dataLoadedTcs.TrySetCanceled();
    }
}

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

Program.cs

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

CSS

.dxbl-grid {
    height: 522px;
}
.highlighted-item > td {
    background-color: var(--bs-danger-border-subtle)
}

.highlighted-item > td:first-child {
    background-color: transparent;
}
.grid-container {
    display: contents;
}

Run Demo: Grid - Conditional Formatting

For more information about summaries in the Grid component, refer to the following topic: Summary in Blazor Grid.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IGridSummaryItem

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.BranchedRenderComponent

DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent

DxGridSummaryItem