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.v20.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public string CaptionFor { get; set; }
Property Value
Type | Description |
---|---|
String | A unique identifier. |
Remarks
Use the CaptionFor property to associate a layout item’s caption with a component in the layout item’s template.
- Specify the layout item’s Caption property. A browser renders the caption as an HTML label element.
- 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.)
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="Contact Name:" CaptionFor="text_box"> <Template> <DxTextBox @bind-Text="@Name" InputId="text_box"></DxTextBox> </Template> </DxFormLayoutItem> @*...*@ </DxFormLayout>
If you use a non-DevExpress component, specify the id property.
<DxFormLayout> <DxFormLayoutItem Caption="Contact Name:" CaptionFor="text_box"> <Template> <input value="@Name" id="text_box"> </Template> </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.