Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGridSummaryItem.FooterColumnName Property

Specifies a column under which to display the summary value.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(null)]
[Parameter]
public string FooterColumnName { get; set; }

#Property Value

Type Default Description
String null

The column name.

#Remarks

The DxGrid supports total and group summaries. Each summary can contain predefined and custom summary items.

#Total Summary

The Grid displays the total summary value under the column bound to the specified data field (FieldName). To show the summary value under another column, assign the column name to the FooterColumnName property.

razor
<DxGrid Data="@Data" PageSize="6" ColumnResizeMode="GridColumnResizeMode.NextColumn" CssClass="my-class" >
    <Columns>
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c"/>
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Total"
                            UnboundType="GridUnboundColumnType.Decimal"
                            UnboundExpression="[UnitPrice] * [Quantity]"
                            DisplayFormat="c" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FooterColumnName="CompanyName" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Avg" FieldName="Quantity" 
                           ValueDisplayFormat="0.00" FooterColumnName="Total" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" />
    </TotalSummary>
</DxGrid>

DevExpress Blazor Grid - Total Summary

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

#Group Summary

The Grid displays the group summary value 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.

Razor
<DxGrid @ref="Grid"
        Data="@Data"
        ShowGroupPanel="true"
        GroupFooterDisplayMode="@CurrentDisplayMode"
        SizeMode="Params.SizeMode"
        ColumnResizeMode="GridColumnResizeMode.NextColumn"
        TextWrapEnabled="false"
        VirtualScrollingEnabled="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate" GroupIndex="0" MinWidth="70" Width="10%" />
        <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
        <DxGridDataColumn FieldName="Country" Width="10%" />
        <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" FooterColumnName="CompanyName" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" FooterColumnName="Total" />
    </GroupSummary>
@* ... *@
</DxGrid>

Blazor Grid Group Footers Display Mode Auto

Run Demo: Grid - Group Footer Summary

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

#Implements

See Also