Skip to main content

DxGridSummaryItem Class

A summary item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

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.

@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.Max"
                           ValueDisplayFormat="c"
                           FieldName="UnitPrice" />
    </GroupSummary>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
    </TotalSummary>
</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();
    }
}

DevExpress Blazor Grid - Summaries

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:

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

<DxGrid Data="GridDataSource"
        UnboundColumnData="Grid_CustomUnboundColumnData"
        CustomizeSummaryDisplayText="Grid_CustomizeSummaryDisplayText"
        CustomSummary="Grid_CustomSummary"
        AllowSelectRowByClick="true"
        SelectedDataItems="@SelectedDataItems"
        SelectedDataItemsChanged="Grid_SelectedDataItemsChanged"
        @ref="Grid">
    <Columns>
        <DxGridSelectionColumn />
        <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>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Custom" Name="Custom" FieldName="TotalPrice" />
    </TotalSummary>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }
    IGrid Grid { get; set; }

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

    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("TotalPrice");
                break;
            case GridCustomSummaryStage.Finalize:
                e.TotalValueReady = true;
                break;
        }
    }

    void Grid_CustomizeSummaryDisplayText(GridCustomizeSummaryDisplayTextEventArgs e) {
        if (e.Item.Name == "Custom")
            e.DisplayText = string.Format("Sum of Selected: {0:c}", 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);
        }
    }

    void Grid_SelectedDataItemsChanged() {
        Grid.RefreshSummary();
    }

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

DevExpress Blazor Grid - Custom Summary

Run Demo: Grid - Custom Summary

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.

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

DevExpress Blazor Grid- Summary - Predefined Format

The following API members allows you to format the summary’s value and display text:

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

DevExpress Blazor Grid - Format Summary

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
DxGridSummaryItem
See Also