DxDataGrid<T>.TotalSummary Property

Specifies the collection of total summary items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

[Parameter]
public RenderFragment TotalSummary { 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 total summary:

  1. Add a DxDataGridSummaryItem object to the TotalSummary 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 summary value is displayed under the column bound to the specified data field. To show the summary value under another column, specify the ShowInColumn property.

    The Count function does not process any field values. If you select this function, use either the Field or ShowInColumn property to define which column displays the number of rows.

  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. You can also specify the following options:
    • Alignment - Specifies the summary item's alignment within a column cell.
    • CssClass - Specifies the name of a CSS class applied to the summary item.
    • Visible - Specifies whether the summary item is visible.
<DxDataGrid Data="@Orders">
    <Columns>
        <DxDataGridDateEditColumn Field="@nameof(Order.OrderDate)" Width="240px" />
        <DxDataGridComboBoxColumn Field="@nameof(Order.CountryId)"
                                  Caption="Ship Country"
                                  Data="@Countries"
                                  ValueFieldName="@nameof(Country.Id)"
                                  TextFieldName="@nameof(Country.CountryName)"
                                  FilteringMode="DataGridFilteringMode.Contains"
                                  Width="250px" />
        <DxDataGridColumn Field="@nameof(Order.Product)" />
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitPrice)"
                                  DisplayFormat="c"
                                  Width="120px" />
    </Columns>
    <TotalSummary>
        <DxDataGridSummaryItem Field=@nameof(Order.OrderDate)
                               SummaryType=SummaryItemType.Min
                               DisplayFormat="First: {0:D}" />
        <DxDataGridSummaryItem Field=@nameof(Order.UnitPrice)
                               SummaryType=SummaryItemType.Sum
                               DisplayFormat="Sum: {0:c}" />
        <DxDataGridSummaryItem ShowInColumn=@nameof(Order.CountryId)
                               SummaryType=SummaryItemType.Count />
   </TotalSummary>
</DxDataGrid>

Data Grid Total Summary

Run Demo: Data Grid - Total Summary

See Also