From 8f933570314376be4fa33cadd85bc4fbd3c009e7 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <Hristian.Stefanov@progress.com>
Date: Fri, 10 Mar 2023 18:41:58 +0200
Subject: [PATCH 1/2] docs(form): add article for combination of autogenerated
 and manually defined fields

---
 components/form/formitems/overview.md | 33 +++++++++++++++++++++++++--
 components/form/overview.md           |  3 ++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/components/form/formitems/overview.md b/components/form/formitems/overview.md
index 5fbc3cffe2..6b9a59d1fc 100644
--- a/components/form/formitems/overview.md
+++ b/components/form/formitems/overview.md
@@ -16,6 +16,7 @@ In this article:
 
 * [Basics](#basics)
 * [Example - Customize the appearance of the editors in the Form](#customize-the-appearance-of-the-editors-in-the-form)
+* [Hybrid Form - Combination of manually defined and autogenerated fields](#hybrid-form---combination-of-manually-defined-and-autogenerated-fields)
 
 ## Basics
 
@@ -75,12 +76,40 @@ The `FormItem` tag exposes the following parameters which you can use to customi
 }
 ````
 
->caption The result from the code snippet above
+## Hybrid Form - Combination of manually defined and autogenerated fields
 
-![FormItem example](images/formitem-example.png)
+To combine manually defined with autogenerated fields, use an instance of the `FormAutoGeneratedItems` tag inside the `FormItems` collection.
 
+>caption Basic configuration of the Hybrid Form.
 
+````CSHTML
+@* Use the FormAutoGeneratedItems tag inside the FormItems to control the autogenerated fields position. *@
+
+@using System.ComponentModel.DataAnnotations
+
+<TelerikForm Model="@person">
+    <FormValidation>
+        <DataAnnotationsValidator></DataAnnotationsValidator>
+    </FormValidation>
+    <FormItems>
+        <FormItem Field="@nameof(Person.Id)" Enabled="false" LabelText="Id"></FormItem>
+        <FormItem Field="@nameof(Person.FirstName)" LabelText="First name" Hint="Enter your first name"></FormItem>
+        <FormAutoGeneratedItems></FormAutoGeneratedItems>
+    </FormItems>
+</TelerikForm>
 
+@code {
+    public Person person = new Person();
+
+    public class Person
+    {
+        public int Id { get; set; } = 10;
+        public string FirstName { get; set; } = "John";
+        public string LastName { get; set; } = "Doe";
+        public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
+    }
+}
+````
 
 ## See Also
 
diff --git a/components/form/overview.md b/components/form/overview.md
index c794ae84fd..53fafdb4c5 100644
--- a/components/form/overview.md
+++ b/components/form/overview.md
@@ -104,10 +104,11 @@ To use the Form component with a model:
 
 ## Form Items
 
-There are two ways to generate fields in the Blazor Form:
+There are three ways to generate fields in the Blazor Form:
 
 * By manually defining [FormItems]({%slug form-formitems%}).
 * Allowing the Form to [automatically generate them](#automatic-generation-of-field).
+* Combining the first two ways - [manually defined and autogenerated form fields together]({%slug form-formitems%}#hybrid-form---combination-of-manually-defined-and-autogenerated-fields).
 
 The Form Items allow you customize the [default editors](#automatic-generation-of-fields). [See the [FormItems article for more information...]({%slug form-formitems%}).
 

From 9b8be1310127435906a6daf4b664dedb165bcd95 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <Hristian.Stefanov@progress.com>
Date: Tue, 14 Mar 2023 11:56:36 +0200
Subject: [PATCH 2/2] docs(form): fixes as per comments

---
 components/form/formitems/overview.md | 6 +++---
 components/form/overview.md           | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/form/formitems/overview.md b/components/form/formitems/overview.md
index 6b9a59d1fc..6ff0426fb3 100644
--- a/components/form/formitems/overview.md
+++ b/components/form/formitems/overview.md
@@ -15,8 +15,8 @@ You can customize the [default editors]({%slug form-overview%}#automatic-generat
 In this article:
 
 * [Basics](#basics)
-* [Example - Customize the appearance of the editors in the Form](#customize-the-appearance-of-the-editors-in-the-form)
-* [Hybrid Form - Combination of manually defined and autogenerated fields](#hybrid-form---combination-of-manually-defined-and-autogenerated-fields)
+* [Example&mdash;Customize the appearance of the editors in the Form](#customize-the-appearance-of-the-editors-in-the-form)
+* [Add Form Fields to Autogenerated Ones](#add-form-fields-to-autogenerated-ones)
 
 ## Basics
 
@@ -76,7 +76,7 @@ The `FormItem` tag exposes the following parameters which you can use to customi
 }
 ````
 
-## Hybrid Form - Combination of manually defined and autogenerated fields
+## Add Form Fields to Autogenerated Ones
 
 To combine manually defined with autogenerated fields, use an instance of the `FormAutoGeneratedItems` tag inside the `FormItems` collection.
 
diff --git a/components/form/overview.md b/components/form/overview.md
index 53fafdb4c5..a980551da9 100644
--- a/components/form/overview.md
+++ b/components/form/overview.md
@@ -106,9 +106,9 @@ To use the Form component with a model:
 
 There are three ways to generate fields in the Blazor Form:
 
-* By manually defining [FormItems]({%slug form-formitems%}).
-* Allowing the Form to [automatically generate them](#automatic-generation-of-field).
-* Combining the first two ways - [manually defined and autogenerated form fields together]({%slug form-formitems%}#hybrid-form---combination-of-manually-defined-and-autogenerated-fields).
+* [Define FormItems]({%slug form-formitems%}) manually.
+* Allow the [Form to automatically generate items](#automatic-generation-of-field).
+* [Combine the above two options]({%slug form-formitems%}#add-form-fields-to-autogenerated-ones).
 
 The Form Items allow you customize the [default editors](#automatic-generation-of-fields). [See the [FormItems article for more information...]({%slug form-formitems%}).