DxGrid.TotalSummary Property

Contains total summary items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

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

Remarks

The DxGrid calculates total summary values across all records and displays these values in the footer. To create the total summary, declare a DxGridSummaryItem object in the TotalSummary 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.

A summary item has the following predefined display format: {summary label}: {summary value}. The following members allow you to customize this format:

ValueDisplayFormat property

Specifies the display format for the summary value ({summary value}).

CustomizeSummaryDisplayText event

Allows you to customize the entire summary display text.

<DxGrid Data="@Data"
        SizeMode="Params.SizeMode" 
        KeyboardNavigationEnabled="Params.KeyboardNavigationEnabled">
    <Columns>
        <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
        <DxGridDataColumn FieldName="City" Width="10%" />
        <DxGridDataColumn FieldName="Region" Width="10%" />
        <DxGridDataColumn FieldName="Country" Width="10%" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%" />
        <DxGridDataColumn FieldName="Quantity" MinWidth="80" Width="10%" />
        <DxGridDataColumn FieldName="Total"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="[UnitPrice] * [Quantity]"
                          DisplayFormat="c"
                          MinWidth="100"
                          Width="15%" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="CompanyName" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Min" FieldName="Quantity" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Avg" FieldName="Quantity" ValueDisplayFormat="0.00" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max" FieldName="Quantity" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" />
    </TotalSummary>
</DxGrid>

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

Run Demo: Grid - Total Summary Watch Video: Grid - Summary

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