DxGridSummaryItem.FooterColumnName Property
Specifies a column under which to display the summary value.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.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>
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"
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>
For more information about summaries in the Grid component, refer to the following topic: Summary in Blazor Grid.