Class FormItem

Inheritance

System.Object

FormItem

Namespace: Syncfusion.Blazor.DataForm

Assembly: Syncfusion.Blazor.dll

Syntax

public class FormItem : OwningComponentBase

Constructors

FormItem()

Declaration

public FormItem()

Properties

ColumnSpan

Gets or sets the number of columns this field should span within a row layout.

Declaration

public Nullable<int> ColumnSpan { get; set; }

Property Value

Type	Description
System.Nullable<System.Int32>	An `int?` value that determines how many columns a cell occupies. The default value is `null`.

Remarks

Set ColumnSpan to a value greater than 1 to allow this field to stretch across multiple columns, enabling flexible layouts in the SfDataForm.

Examples

<FormItem ColumnSpan="2" />

CssClass

Gets or sets one or more CSS class names that define custom styles for the SfDataForm component field.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A `string` value representing the CSS class or space-separated classes to apply. The default value is `string.Empty`.

Remarks

Use this property to apply custom colors, fonts, sizes, or other styling to the FormItem. If not specified, the default styling is applied.

Examples

<FormItem CssClass="my-custom-class" />

EditorType

Gets or sets the specific editor type used for this field in the SfDataForm component.

Declaration

public FormEditorType EditorType { get; set; }

Property Value

Type	Description
FormEditorType	A FormEditorType value indicating which editor component is used. The default is determined by the field's data type.

Remarks

This property lets you override the automatic editor selection for this FormItem. Available editor types include TextBox, DatePicker, DropDownList, among others.

Examples

<FormItem EditorType="FormEditorType.TextBox" />

Field

Gets or sets the name of the model property for which an editor will be rendered.

Declaration

public string Field { get; set; }

Property Value

Type	Description
System.String	A `string` value indicating the model's field name (case-sensitive).

Remarks

Set Field to match the property name in your data model. You can use either a hardcoded string (e.g., Field="Name") or the @nameof syntax (e.g., Field=@nameof(Customer.Name)) for compile-time safety. If a custom editor template is provided using the Template property, this property does not need to be set.

Examples

<FormItem Field="FirstName" />

ID

Gets or sets the unique identifier for this SfDataForm component field.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A `string` value representing the unique ID assigned to this form field. The default is `string.Empty`.

Remarks

Assign a unique and meaningful value to this property for accessibility or programmatic access. Ideally, the ID should be immutable within a session.

Examples

<FormItem ID="customId123" />

IsEnabled

Gets or sets a value indicating whether the SfDataForm component field is enabled for user interaction.

Declaration

public bool IsEnabled { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the field is enabled; `false` to disable and make it non-interactive. The default is `true`.

Remarks

When this property is set to false, the field displays as disabled and cannot be interacted with. By default, all fields are enabled.

Examples

<FormItem IsEnabled="false" />

LabelText

Gets or sets the display label for the SfDataForm component field.

Declaration

public string LabelText { get; set; }

Property Value

Type	Description
System.String	A `string` containing the label text. The default value is `string.Empty`.

Remarks

Use this property to assign a user-friendly name or description as a label to this form field, enhancing clarity and accessibility.

Examples

<FormItem LabelText="First Name" />

Placeholder

Gets or sets placeholder text to display inside the SfDataForm field when its value is empty.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	A `string` placeholder shown when the field is empty. The default value is `string.Empty`.

Remarks

Use this property to display a hint or instruction in the FormItem before the user enters a value. Helps with usability and accessibility.

Examples

<FormItem Placeholder="Enter your name" />

Template

Gets or sets a custom template for rendering the SfDataForm field, allowing advanced UI customizations.

Declaration

public Template Template { get; set; }

Property Value

Type	Description
Template	A Template object that defines the UI to display for this form field. The default value is `null`.

Remarks

Use the Template property to create a personalized appearance for the field using custom HTML markup, other components, or logic.

Examples

<FormItem>
    <Template>
        <InputText Value="@context.Model.Name" />
    </Template>
</FormItem>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose(Boolean)

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

OnInitialized()

Declaration

protected override void OnInitialized()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

UpdateComponent(Template)

Declaration

public virtual void UpdateComponent(Template Item)

Parameters

Type	Name	Description
Template	Item