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

Declaration

[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.

<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;
    }    
}

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