[4.1] docs(form): add article for combination of autogenerated and manually… (#1354)

* docs(form): add article for combination of autogenerated and manually defined fields

* docs(form): fixes as per comments

Author: xristianstefanov

components/form/formitems/overview.md

@@ -15,7 +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)
+* [Example—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
 
@@ -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
+## Add Form Fields to Autogenerated Ones
 
-![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
 

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).
+* [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%}).