DxDataGrid<T>.GroupSummary Property

Specifies the collection of group summary items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

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

Property Value

Type Description
RenderFragment

A collection of items (UI fragment).

Remarks

The Data Grid supports two summary types:

  • Total summaries are calculated across all grid rows and displayed in the grid's footer.
  • Group summaries are calculated across rows in individual groups and displayed group rows.

Do the following to calculate a group summary:

  1. Add a DxDataGridSummaryItem object to the GroupSummary collection.
  2. Use the item's SummaryType property to specify an aggregate function. The following functions are available: Sum, Min, Max, Avg, and Count.
  3. Set the Field property to the name of a data field whose values take part in calculations. The Min and Max functions require a numeric or date-time data field. The Avg and Sum functions work with numeric fields only. The Count function does not process any field values and does not require that you specify the Field property.

  4. Use the DisplayFormat property to format the summary value. The format pattern can include static text and the predefined placeholders: {0} returns the summary value and {1} returns the parent column’s caption.

    If you do not specify the DisplayFormat property, the following format is applied: {Summary function}: {summary value}. For example, Count: 100 and Sum: 1,000.

  5. Use the GroupSummaryPosition property to position the group summary. The following values are available:

<DxDataGrid Data="@SalesData"
            ShowGroupPanel="true">
    <Columns>
        <DxDataGridSpinEditColumn Field=@nameof(SaleInfo.OrderId)
                                  Width="120px" />
        <DxDataGridColumn Field=@nameof(SaleInfo.Region)
                          GroupIndex="0"
                          Width="240px" />
        <DxDataGridColumn Field=@nameof(SaleInfo.Country)
                          GroupIndex="1" />
        <DxDataGridDateEditColumn Field="@nameof(SaleInfo.Date)"
                                  DisplayFormat="D" />
        <DxDataGridColumn Field=@nameof(SaleInfo.City)/>
        <DxDataGridSpinEditColumn Field="@nameof(SaleInfo.Amount)"
                                  DisplayFormat="c"
                                  Width="120px" />
    </Columns>
    <GroupSummary>
        <DxDataGridSummaryItem SummaryType=SummaryItemType.Count
                               GroupSummaryPosition="GroupSummaryPosition.GroupRow" />
        <DxDataGridSummaryItem Field=@nameof(SaleInfo.Amount)
                               SummaryType=SummaryItemType.Sum
                               GroupSummaryPosition="GroupSummaryPosition.GroupFooter"
                               DisplayFormat="Total: {0:c}" />
        <DxDataGridSummaryItem Field=@nameof(SaleInfo.Date)
                               SummaryType=SummaryItemType.Min
                               DisplayFormat="First: {0:D}"
                               GroupSummaryPosition="GroupSummaryPosition.GroupFooter" />
    </GroupSummary>
</DxDataGrid>

Data Grid Group Summary Position

Run Demo: Data Grid - Group Summary

See Also