Skip to main content

DxGridColumn.GroupFooterTemplate Property

Specifies a template for the column’s group footer cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridColumnGroupFooterTemplateContext> GroupFooterTemplate { get; set; }

Property Value

Type Description
RenderFragment<GridColumnGroupFooterTemplateContext>

The template for the column’s group footer cell.

Remarks

Group footers display group summaries if you specify the FooterColumnName property. Group footers contain footer cells that correspond to data columns. Footer cells display formatted summary values.

Blazor Grid - Group Footer

The GroupFooterTemplate allows you to specify custom content and appearance for the group footer cell in this column. To define a common template for all group footer cells in the grid, use the DxGrid.ColumnGroupFooterTemplate.

The GroupFooterTemplate accepts a GridColumnGroupFooterTemplateContext object as the context parameter. You can use the parameter’s members to get the Column and SummaryItems. You can also access the Grid object and use its members to obtain additional information about the component.

The example below makes group summary values bold for the UnitPrice column.

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

<DxGrid Data="@Data" ShowGroupPanel="true">
    <Columns>
        <DxGridDataColumn FieldName="Country" GroupIndex="0" />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="OrderDate" GroupIndex="1" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="150px">
            <GroupFooterTemplate>
                @{
                    var summaryItems = context.SummaryItems;
                    if (summaryItems.Any()) {
                        foreach (var i in summaryItems) {
                            @context.Grid.GetGroupSummaryLabel(i, context.GroupRowVisibleIndex)
                            <text>: </text>
                            <b>@context.Grid.GetGroupSummaryFormattedValue(i, context.GroupRowVisibleIndex)</b><br />
                        }
                    }
                }
            </GroupFooterTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Quantity" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max" FieldName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Min" FieldName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Quantity" />
    </TotalSummary>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max" FieldName="UnitPrice" FooterColumnName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Min" FieldName="UnitPrice" FooterColumnName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Quantity" FooterColumnName="Quantity" />
    </GroupSummary>
</DxGrid>

@code {
    object Data { get; set; }
    NorthwindContext Northwind { get; set; }

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

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

Blazor Grid - Group Footer Template

To specify a template for the column’s footer cell, use the FooterTemplate property.

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

Implements

See Also