Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 14, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f93357
docs(form): add article for combination of autogenerated and manually…
xristianstefanov Mar 10, 2023
9b8be13
docs(form): fixes as per comments
xristianstefanov Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 32 additions & 3 deletions components/form/formitems/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
7 changes: 4 additions & 3 deletions components/form/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%}).

Expand Down