DxFormLayoutGroup.CaptionTemplate Property

Specifies the template used to display the group’s caption.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment<IFormLayoutGroupInfo>	Caption content.

Remarks

Specify the CaptionTemplate property to customize the group’s header caption. If you use this property, place layout items (group content) in the Items component.

The example below adds an Open Iconic icon to the group’s caption:

<DxFormLayout>
    <DxFormLayoutGroup ColSpanMd="6">
        <CaptionTemplate>
            <div>
                <span class="oi oi-calendar"></span>
                Work Information
            </div>
        </CaptionTemplate>
        <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;
    }
}

CaptionTemplate 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