DxGridSummaryItem.FooterColumnName Property

Specifies a column under which to display the summary value.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[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.

<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>

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.

<DxGrid @ref="Grid"
        Data="@Data"
        ShowGroupPanel="true"
        GroupFooterDisplayMode="@CurrentDisplayMode"
        SizeMode="Params.SizeMode" 
        KeyboardNavigationEnabled="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>

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

FooterColumnName