DxGrid.DataColumnGroupRowTemplate Property

Specifies a common template used to display all group rows in the Grid.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<GridDataColumnGroupRowTemplateContext> DataColumnGroupRowTemplate { get; set; }

Property Value

Type Description
RenderFragment<GridDataColumnGroupRowTemplateContext>

The template for all group rows.

Remarks

The DataColumnGroupRowTemplate allows you to specify custom content and appearance for all group rows in the Grid. To define a template for group rows of individual columns, use the DxGridDataColumn.GroupRowTemplate.

The DataColumnGroupRowTemplate accepts a GridDataColumnGroupRowTemplateContext object as the context parameter. You can use the parameter’s members to get information about the current group row (for instance, GroupValue, SummaryItems, DataColumn, and so on). You can also access the Grid object and use its members to obtain additional information about the Grid.

The example below customizes all group rows displayed in the Grid. These rows contain the group field’s value and summary values that are highlighted in bold.

@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="@Data"
        ShowGroupPanel="true">
    <Columns>
        <DxGridDataColumn FieldName="Country" GroupIndex="0" Width="200px" />
        <DxGridDataColumn FieldName="City" GroupIndex="1"/>
        <DxGridDataColumn FieldName="OrderDate" Width="200px" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="120px" />
        <DxGridDataColumn FieldName="Quantity" Width="120px" />
    </Columns>
    <DataColumnGroupRowTemplate>
        <text>@context.DataColumn.FieldName: @context.GroupValue</text>
        @{
            var summaryItems = context.Grid.GetGroupSummaryItems();
            if (summaryItems.Any()) {
                <text> (</text>
                foreach (var i in summaryItems) {
                    if (i != summaryItems.First()) {
                        <text>, </text>
                    }
                    @context.Grid.GetGroupSummaryLabel(i, context.VisibleIndex)
                    <text>: </text>
                    <b>@context.Grid.GetGroupSummaryFormattedValue(i, context.VisibleIndex)</b>
                }
                <text>)</text>
            }
        }
    </DataColumnGroupRowTemplate>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="CompanyName" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Max" FieldName="OrderDate" />
    </GroupSummary>
</DxGrid>

@code {
    object Data { get; set; }

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

Blazor Grid Common Group Row Template

Run Demo: Grid - Group Row Template

See Also