DxFormLayoutItem.CaptionFor Property

Specifies a unique identifier of the layout item’s caption and allows you to associate the caption with a component in the template.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string CaptionFor { get; set; }

Property Value

Type	Default	Description
String	null	A unique identifier.

Remarks

Use the CaptionFor property to associate a layout item’s caption with a component in the layout item’s template.

1. Specify the layout item’s Caption property. A browser renders the caption as an HTML label element.
2. Set the layout item’s CaptionFor property to a unique value. This value is assigned to the label’s for attribute. Note that this value is case-sensitive, should contain at least one character, and should not contain whitespaces (spases, tabs, etc.)

3. Set the ID of a component in the template to the same value as the item’s CaptionFor.

   If you use a DevExpress data editor (DxTextBox, DxSpinEdit, etc.), specify the InputId property.

   <DxFormLayout>
       <DxFormLayoutItem Caption="Position:" ColSpanMd="12" CaptionFor="text_box">
           <DxTextBox @bind-Text="@Position" Enabled="!Unemployed" InputId="text_box" />
       </DxFormLayoutItem>
       @*...*@
   </DxFormLayout>
   

   If you use a non-DevExpress component, specify the id property.

   <DxFormLayout>
       <DxFormLayoutItem Caption="Position:" CaptionFor="text_box">
           <input value="@Name" id="text_box">
       </DxFormLayoutItem>
   </DxFormLayout>
   

You can click the associated label to focus/activate the input element.

Note

If you do not specify the CaptionFor property, the Form Layout generates a random identifier (GUID) and assings it to the label’s for attribute and to the id property of the first component in the template.