DxGrid.GroupSummary Property

Contains group summary items.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

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 a group summary, declare a DxGridSummaryItem object in the GroupSummary template, and specify 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.

The following code snippet creates group summaries:

<DxGrid @ref="Grid"
        Data="@Data"
        PageSize="20"
        ShowGroupPanel="true"
        SizeMode="Params.SizeMode"
        ColumnResizeMode="GridColumnResizeMode.NextColumn"
        TextWrapEnabled="false">
    <Columns>
        <DxGridDataColumn FieldName="Country" GroupIndex="0" Width="10%" />
        <DxGridDataColumn FieldName="City" GroupIndex="1" Width="10%" />
        <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%" />
        <DxGridDataColumn FieldName="Quantity" Width="10%" />
        <DxGridDataColumn FieldName="Total"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="[UnitPrice] * [Quantity]"
                          DisplayFormat="c"
                          MinWidth="100"
                          Width="15%" />
    </Columns>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="CompanyName" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" />
    </GroupSummary>
</DxGrid>

Run Demo: Group Summary

Run Demo: Group Footer Summary

YouTube video

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

ValueDisplayFormatSpecifies format pattern for the summary value.DisplayTextSpecifies display text pattern for the summary item. A display text string can include static text and placeholders for summary value and column caption.CustomizeSummaryDisplayTextHandle 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.

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

See Also

TotalSummary

DxGrid Class

DxGrid Members

DevExpress.Blazor Namespace