DxFormLayoutItem.Caption Property

Specifies an item’s caption.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public string Caption { get; set; }

Property Value

Type Description
String

The item’s caption.

Remarks

Use the Caption property to specify the item’s caption.

Horizontal Caption

Position Captions

You can display the caption above an item (Vertical) or at its left (Horizontal). Use the item’s CaptionPosition property to position a single item. To specify the position for all captions in the Form Layout component, layout group, or tab page, use the corresponding object’s CaptionPosition property. Individual settings have higher priority.

<DxFormLayout>
    <DxFormLayoutItem Caption="Full Name:">
        <DxTextBox></DxTextBox>
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Phone Number:">
        <DxMaskedInput @bind-Value="@Telephone" Mask="(999)000-0000" />
    </DxFormLayoutItem>
    <DxFormLayoutItem ColSpanMd="12" Caption="Feedback:" CaptionPosition="CaptionPosition.Vertical">
        <DxMemo NullText="Leave your feedback here..."></DxMemo>
    </DxFormLayoutItem>
</DxFormLayout>

Vertical Caption Position for Long Memo

Run Demo: Form Layout - Caption Position

Align Captions

Use the ItemCaptionAlignment property to set the caption padding.

The code below sets the ItemCaptionAlignment property to All.

<DxFormLayout ItemCaptionAlignment="ItemCaptionAlignment.All">
    <DxFormLayoutGroup Caption="Personal information">
        <DxFormLayoutItem Caption="Full Name:">
            <DxTextBox Text="Mary Smith" />
        </DxFormLayoutItem>
        <!-- -->
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Employment Information">
        <!-- -->
    </DxFormLayoutGroup>
</DxFormLayout>

All captions alignment

In the following example, the ItemCaptionAlignment property is set to InGroups:

In groups captions alignment

In the following example, the ItemCaptionAlignment property is set to None:

No captions alignment

Associate an Editor with the Caption

To associate a component in a layout item template with the layout item’s caption, use the CaptionFor property.

<DxFormLayout>
    <DxFormLayoutItem Caption="Contact Name:" CaptionFor="name_text_box">
        <Template>
            <input value="@Name" id="name_text_box">
        </Template>
    </DxFormLayoutItem>

    <DxFormLayoutItem Caption="Email:" CaptionFor="email_text_box">
        <Template>
            <input value="@Email" id="email_text_box">
        </Template>
    </DxFormLayoutItem>
</DxFormLayout>

If you do not specify the CaptionFor property value but specify the Caption, the Form Layout generates a random identifier and sets it to the caption label’s for attribute and the associated component’s ID property.

See Also