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

DxFormLayoutGroup.HeaderTemplate Property

Specifies the template used to display the group header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment<IFormLayoutGroupInfo> HeaderTemplate { get; set; }

#Property Value

Type Description
RenderFragment<IFormLayoutGroupInfo>

A render fragment that declares a group header.

#Remarks

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.

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

@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