autogeneration.md

layout	post
title	Form AutoGenerated Items in Blazor DataForm Component | Syncfusion
description	Checkout and learn here about how to configure auto generated Items based on field types in Blazor DataForm component.
platform	Blazor
control	DataForm
documentation	ug

Configuring auto generation

Blazor DataForm can create editor fields automatically based on the primitive property types when the FormAutoGenerateItems tag is used inside the DataForm. The following table lists each supported type with its corresponding default editor component.

Type	Component
int , float, decimal,double,long	SfNumericTextBox
string	SfTextBox
DateTime	SfDateTimePicker
DateOnly	SfDatePicker
TimeOnly	SfTimePicker
bool	SfCheckBox
enum	SfDropDownList

The following example demonstrates auto-generated items for the supported types.

{% tabs %} {% highlight razor tabtitle="FormAutoGenerateItems" %}

{% include_relative code-snippet/autogenerateditems/autogenerateditems.razor %}

{% endhighlight %} {% endtabs %}

Combined auto generated and custom fields

The FormAutoGenerateItems can be utilized independently, as demonstrated in the previous example, or it can be placed in-between, above, or below multiple FormItem tags. This creates editors for all supported types except those explicitly defined using FormItem, preventing duplicate editors.

{% tabs %} {% highlight razor tabtitle="FormAutoGenerateItems" %}

{% include_relative code-snippet/autogenerateditems/combined-autogeneration-custom-field.razor %}

{% endhighlight %} {% endtabs %}

In the given example, StringField, DateTimeField, and BoolField are explicitly defined with FormItem. All remaining eligible properties are auto-generated with their corresponding editor types and positioned relative to the FormAutoGenerateItems tag.

Cancel the auto generate fields

Auto-generation can be controlled in two ways:

• To disable auto-generation entirely, omit the FormAutoGenerateItems tag. Only the explicitly declared FormItem elements will render.
• To exclude specific fields while keeping auto-generation for the rest, declare those fields explicitly using FormItem. When both FormItem and FormAutoGenerateItems are present, the explicitly defined fields are not auto-generated.

{% tabs %} {% highlight razor tabtitle="AutoGenerate" %}

{% include_relative code-snippet/autogenerateditems/cancel-autogenration.razor %}

{% endhighlight %} {% endtabs %}

See also

Explicitly define editors