Back to Devexpress

DxInputDataEditorBase<T>.InputId Property

blazor-devexpress-dot-blazor-dot-base-dot-dxinputdataeditorbase-1-16f0a74e.md

latest2.9 KB
Original Source

DxInputDataEditorBase<T>.InputId Property

Specifies a unique identifier (ID) of an editor’s input element.

Namespace : DevExpress.Blazor.Base

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[Parameter]
public string InputId { get; set; }

Property Value

TypeDescription
String

A unique identifier.

|

Remarks

The InputId property value is assigned to the id attribute of an editor’s input element. The id is case-sensitive, should contain at least one character, and should not contain whitespaces (spaces, tabs, etc.)

When you create a Form Layout component and add an editor to a layout item’s template, use the InputId property to associate the an editor with the layout item’s caption.

  • 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.
  • Set the editor’s InputId property to the same value as the item’s CaptionFor.

Note

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

razor
<DxFormLayout>
    <DxFormLayoutItem Caption="Phone number:" CaptionFor="masked_input">
        <Template>
            <DxMaskedInput Value="Value"
                           Mask="(999) 000-00-00"
                           InputId="masked_input" />
        </Template>
    </DxFormLayoutItem>
    @*...*@
</DxFormLayout>

@code{
    string Value { get; set; }
}

You can click the associated label to focus the component.

See Also

DxInputDataEditorBase<T> Class

DxInputDataEditorBase<T> Members

DevExpress.Blazor.Base Namespace