Skip to main content

DxGridSummaryItem.FooterColumnName Property

Specifies a column under which to display the summary value.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

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.

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        UnboundColumnData="Grid_CustomUnboundColumnData">
    <Columns>
        <DxGridDataColumn FieldName="ProductId" Caption="Product ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="TotalPrice"
                      DisplayFormat="c"
                      UnboundType="GridUnboundColumnType.Decimal" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max"
                           FieldName="UnitPrice"
                           ValueDisplayFormat="c"                           
                           FooterColumnName="TotalPrice" />
    </TotalSummary>
</DxGrid>
@* ... *@
@code {
    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.OrderDetails
            .Include(i => i.Order)
            .Include(i => i.Product)
            .ToList();
    }

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if (e.FieldName == "TotalPrice") {
            var UnitPrice = Convert.ToDecimal(e.GetRowValue("UnitPrice"));
            var Quantity = Convert.ToDecimal(e.GetRowValue("Quantity"));
            var Discount = Convert.ToDecimal(e.GetRowValue("Discount"));
            e.Value = Quantity * UnitPrice * (1 - Discount);
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

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.

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="@Data"
        ShowGroupPanel="true"
        UnboundColumnData="Grid_CustomUnboundColumnData">
    <Columns>
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="OrderDate" GroupIndex="0" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="TotalPrice"
                          DisplayFormat="c"
                          UnboundType="GridUnboundColumnType.Decimal" />
    </Columns>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Country" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice"
                           FooterColumnName="TotalPrice"/>
    </GroupSummary>
</DxGrid>
@* ... *@
@code {
    object Data { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Invoices
            .ToList();
    }

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if (e.FieldName == "TotalPrice") {
            var UnitPrice = Convert.ToDecimal(e.GetRowValue("UnitPrice"));
            var Quantity = Convert.ToDecimal(e.GetRowValue("Quantity"));
            var Discount = Convert.ToDecimal(e.GetRowValue("Discount"));
            e.Value = Quantity * UnitPrice * (1 - Discount);
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Group Footers Display Mode Auto

Run Demo: Grid - Group Footer Summary

Implements

See Also