Skip to main content

DxFormLayoutGroup.HeaderTemplate Property

Specifies the template used to display the group header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor


public RenderFragment<IFormLayoutGroupInfo> HeaderTemplate { get; set; }

Property Value

Type Description

A render fragment that declares a group header.


Specify the HeaderTemplate property to customize the header of a Form Layout group. Use the context parameter to access an IFormLayoutGroupInfo object that stores information about a group. If you use this property, place layout items (group content) in the Items component.

    <DxFormLayoutGroup ColSpanMd="6">
            <div class="p-2">
                <em>Work Information</em>
            <DxFormLayoutItem Caption="Position:" ColSpanMd="12">
                <DxTextBox @bind-Text="@Position" Enabled="!Unemployed" />
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="12">
                <DxDateEdit @bind-Date="@HireDate" Enabled="!Unemployed" />
            <DxFormLayoutItem Caption="Notes:" ColSpanMd="12">
                <DxTextBox @bind-Text="@Notes" Enabled="!Unemployed" />

@code {
    string FirstName { get; set; } = "Nancy";
    string LastName { get; set; } = "Davolio";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    string Position { get; set; } = "Sales Representative";
    DateTime? HireDate { get; set; } = DateTime.Now.AddYears(-20);
    string Notes { get; set; } = "Education includes a BA in psychology.";
    bool Unemployed { get; set; }
    void UnemployedChanged(bool value) {
        if(value) {
            Position = Notes = null;
            HireDate = null;
        Unemployed = value;

FL - Custom Header

HeaderTemplate has higher priority than the Caption and CaptionCssClass properties.

HeaderTemplate is one of three properties that allow you to customize group headers:

  • CaptionTemplate customizes the caption (text placeholder area).
  • HeaderContentTemplate customizes the entire header’s client area (keeps the default header background and expand button).
  • HeaderTemplate customizes the entire header including the background and expand button.

Run Demo: Form Layout - Groups

See Also