Skip to main content
All docs
V25.1
  • DxFormLayoutGroup.HeaderContentTemplate Property

    Specifies the template used to display the group’s header content.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public RenderFragment<IFormLayoutGroupInfo> HeaderContentTemplate { get; set; }

    Property Value

    Type Description
    RenderFragment<IFormLayoutGroupInfo>

    Content template.

    Remarks

    Specify the HeaderContentTemplate property to organize the group’s header content. This template does not replace the Expand button. If you use this property, place layout items (group content) in the Items component.

    The following code snippet adds a CheckBox to the Form Layout group’s header:

        <DxFormLayout SizeMode="Params.SizeMode"
                      CssClass="w-100">
            <DxFormLayoutGroup ColSpanMd="6" aria-labelledby="caption-template">
                <HeaderContentTemplate>
                    <div id="caption-template">
                        Work Information
                    </div>
                    <div class="demo-unemployed-checkbox-container">
                        <DxCheckBox CssClass="demo-unemployed-checkbox" CheckedChanged="@((bool t) => UnemployedChanged(t))" LabelPosition="LabelPosition.Left" Checked="@Unemployed">Unemployed</DxCheckBox>
                    </div>
                </HeaderContentTemplate>
                <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="Postal code:" ColSpanMd="12">
                        <DxTextBox @bind-Text="@PostalCode" Enabled="!Unemployed" />
                    </DxFormLayoutItem>
                </Items>
            </DxFormLayoutGroup>
        </DxFormLayout>
    @code {
        static Employee employee;
        string Position { get; set; }
        DateTime? HireDate { get; set; }
        bool Unemployed { get; set; }
        void UnemployedChanged(bool value) {
            if(value) {
                Position = PostalCode = null;
                HireDate = null;
            }
            Unemployed = value;
        }
    }
    

    Custom FL Group Header Content

    HeaderContentTemplate 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