Merge pull request #6928 from syncfusion-content/BLAZ-983104-data-form

Updated the UG Documentation for data-form

Author: UdhayaKumarDuraisamy

blazor/data-form/autogeneration.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Configuring auto generation 
 
-Blazor DataForm component generates the editors automatically based on the primitive property types if we use [FormAutoGenerateItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormAutoGenerateItems.html) inside it.The types with its corresponding default editor components listed below for reference.
+Blazor DataForm can create editor fields automatically based on the primitive property types when the [FormAutoGenerateItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormAutoGenerateItems.html) tag is used inside the DataForm. The following table lists each supported type with its corresponding default editor component.
 
 | Type | Component |
 | ------------ | ----------------------- |
@@ -21,7 +21,7 @@ Blazor DataForm component generates the editors automatically based on the primi
 | `bool` | [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) |
 | `enum` | [SfDropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) |
 
-The below example demonstrates the auto generated items with possible types 
+The following example demonstrates auto-generated items for the supported types.
 
 {% tabs %}
 {% highlight razor tabtitle="FormAutoGenerateItems"  %}
@@ -35,7 +35,7 @@ The below example demonstrates the auto generated items with possible types
 
 ## 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 will create editors for all types except those explicitly defined using `FormItem`.
+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"  %}
@@ -45,13 +45,15 @@ The `FormAutoGenerateItems` can be utilized independently, as demonstrated in th
 {% endhighlight %}
 {% endtabs %}
 
-In the given example, apart from `StringField`, `DateTimeField`, and `BoolField`, the remaining elements will be generated and placed automatically within the specified `FormItem` along with their corresponding editor types.
+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.
 
-![Blazor DataForm Form Item](images/blazor_dataform_partially_autogenerated_items.png)
+![Blazor DataForm showing a mix of custom-defined FormItem fields and auto-generated fields](images/blazor_dataform_partially_autogenerated_items.png)
 
 ## Cancel the auto generate fields 
 
-We can prevent the auto generation of fields by explicitly defining the `FormItem` for required fields in model , which will render the editors based on the specified editors.
+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"  %}

blazor/data-form/column-layout.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Column layout in DataForm component
 
-This segment provides guidance on dividing the form field editors inside the DataForm component into a column-based layout. The [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property allows us to specify the number of columns into which the DataForm should be divided. 
+This section explains how to arrange DataForm editors in a column-based layout. The [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property allows us to specify the number of columns into which the DataForm should be divided. 
 
 {% tabs %}
 {% highlight razor tabtitle="razor" %}
@@ -19,7 +19,7 @@ This segment provides guidance on dividing the form field editors inside the Dat
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Column Layout](images/blazor_dataform_change_form_width.png)
+![Blazor DataForm column layout](images/blazor_dataform_change_form_width.png)
 
 ## Configure the column span 
 
@@ -33,9 +33,9 @@ Additionally, by utilizing the [ColumnSpan](https://help.syncfusion.com/cr/blazo
 {% endhighlight %}
 {% endtabs %}
 
-In the provided example, the layout of the DataForm is segmented into six equal columns, with the editor fields distributed accordingly, depending on the column span allocated to each one.
+In the following example, the DataForm is divided into six equal columns. Each editor consumes space based on its configured column span, resulting in rows where items align cleanly and wrap to the next row when the remaining columns are insufficient.
 
-![Blazor DataForm Column Layout](images/blazor_dataform_column_span.png)
+![Blazor DataForm demonstrating ColumnSpan across a six-column grid](images/blazor_dataform_column_span.png)
 
 
 ## See Also