Skip to main content

DxGrid.ColumnGroupFooterTemplate Property

Specifies a common template for all group footer cells in the Grid.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor


public RenderFragment<GridColumnGroupFooterTemplateContext> ColumnGroupFooterTemplate { get; set; }

Property Value

Type Description

The template for all group footer cells.


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 ColumnGroupFooterTemplate allows you to specify custom content and appearance for all group footer cells in the Grid. To define a template for individual group footer cells, use the DxGridColumn.GroupFooterTemplate.

The ColumnGroupFooterTemplate 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 all group summary values bold.

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

<DxGrid Data="@Data" ShowGroupPanel="true">
        <DxGridDataColumn FieldName="Country" GroupIndex="0" />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="OrderDate" GroupIndex="1" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="150px" />
        <DxGridDataColumn FieldName="Quantity" />
            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 />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max" FieldName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Min" FieldName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Quantity" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max" FieldName="UnitPrice" FooterColumnName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Min" FieldName="UnitPrice" FooterColumnName="UnitPrice" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Quantity" FooterColumnName="Quantity" />

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

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

    public void Dispose() {


Blazor Grid - Column Group Footer Template

To specify a template for footer cells, use the ColumnFooterTemplate property.

See Also