Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGridColumn.HeaderCaptionTemplate Property

Specifies a template used to display the column header’s caption.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<GridColumnHeaderCaptionTemplateContext>

The template for the column header’s caption.

#Remarks

The HeaderCaptionTemplate allows you to customize captions of individual column headers. To define a common template for all header captions in the Grid, use the DxGrid.ColumnHeaderCaptionTemplate.

The HeaderCaptionTemplate accepts a GridColumnHeaderCaptionTemplateContext object as the context parameter. You can use the parameter’s members to get the current Caption, and the Column or DataColumn object. You can also access the Grid object and use its members to obtain additional information about the Grid.

The following example shows a tooltip when a user hovers the mouse pointer over the Details column caption. The example also specifies the CellDisplayTemplate to display the More Info… links in column cells.

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

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="EmployeeId" Caption="Details" AllowSort="false">
            <HeaderCaptionTemplate>
                <span title="Click a link below to show more information about an employee">Details</span>
            </HeaderCaptionTemplate>
            <CellDisplayTemplate>
                <a class="d-block text-left" href="javascript:;" @onclick="() => ShowDetails(context)">More Info...</a>
            </CellDisplayTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>
<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="@PopupHeaderText"
         HorizontalAlignment="HorizontalAlignment.Center"
         VerticalAlignment="VerticalAlignment.Center">
    @PopupContent
</DxPopup>

@code {
    IEnumerable<Employee> Data { get; set; }
    NorthwindContext Northwind { get; set; }
    Employee CurrentEmployee { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Employees
            .ToList();
    }
    bool PopupVisible {
        get { return CurrentEmployee != null; }
        set { if (!value) CurrentEmployee = null; }
    }
    string PopupHeaderText {
        get { return CurrentEmployee != null ? CurrentEmployee.FirstName + " " + CurrentEmployee.LastName : ""; }
    }
    string PopupContent {
        get { return CurrentEmployee != null ? CurrentEmployee.Notes : ""; }
    }
    public void ShowDetails(GridDataColumnCellDisplayTemplateContext context) {
        CurrentEmployee = Data.Where(e => e.EmployeeId == (int)context.Value).FirstOrDefault();
    }
    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Header Caption Template

Run Demo: Grid - Column Templates

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

See Also