Skip to content

Commit 91daba6

Browse files
dimodidimodi
authored
docs(Form): Add information about RowSpacing (#3103)
* docs(Form): Add information about RowSpacing * Update components/form/formgroups.md * RowSpacing continued * RowSpacing continued 2
1 parent 45f9d09 commit 91daba6

File tree

3 files changed

+51
-59
lines changed

3 files changed

+51
-59
lines changed

‎components/form/columns.md

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,29 @@ The Form component for Blazor allows you to add multiple columns by using the `C
1515

1616
>caption Add columns to a Form with Automatically generated fields
1717
18-
You can set the `Columns` parameter when the Form component automatically generates the editors. The form will spread the editors evenly across the columns. It will calculate it using this formula: `propertiesInModelCount / Columns`.
18+
You can set the `Columns` parameter when [`<FormItemsTemplate>`](slug:form-formitems-formitemstemplate) is not used and the Form manages its layout. The Form will spread the editors evenly across the columns.
1919

20-
````RAZOR
21-
@* Add colums to the Form component *@
20+
When using `Columns`, you can also define arbitrary space between the rows with the `RowSpacing` parameter.
2221

23-
<TelerikForm Model="@person"
24-
Columns="2" ColumnSpacing="25px">
22+
````RAZOR
23+
<TelerikForm Model="@Employee"
24+
Columns="2"
25+
ColumnSpacing="24px"
26+
RowSpacing="24px">
2527
</TelerikForm>
2628
2729
@code {
28-
public Person person = new Person();
30+
private Person Employee { get; set; } = new();
2931
3032
public class Person
3133
{
3234
public int Id { get; set; }
33-
public string FirstName { get; set; }
34-
public string LastName { get; set; }
35-
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
36-
public string CompanyName { get; set; }
37-
public DateTime HireDate { get; set; }
38-
public bool IsOnVacation { get; set; } = true;
35+
public string FirstName { get; set; } = string.Empty;
36+
public string LastName { get; set; } = string.Empty;
37+
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-18);
38+
public string CompanyName { get; set; } = string.Empty;
39+
public DateTime HireDate { get; set; } = DateTime.Today;
40+
public bool IsOnVacation { get; set; }
3941
}
4042
}
4143
````

‎components/form/formgroups.md

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ In this article:
2121

2222
The `FormGroup` tag exposes the following parameters:
2323

24-
* `LabelText` - `string` - defines a label for the entire group.
24+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
2525

26-
* `Columns` - `int` - defines the number of columns in the group.
27-
28-
* `ColumnSpacing` - `string` - defines the horizontal space between the editors in the group.
26+
| Parameter | Type and Default&nbsp;Value| Description |
27+
| --- | --- | --- |
28+
| `LabelText` | `string` | The label for the entire group rendered as a `<legend>` element in a `<fieldset>`. |
29+
| `Columns` | `int` | The number of columns in the group. |
30+
| `ColumnSpacing` | `string` (`"16px"`) | The horizontal space between the columns in the group. |
31+
| `RowSpacing` | `string` | The vertical space between the fields in the group. The default value is zero, but there is a default top margin for Form items. This parameter has effect only when `Columns` is set. |
2932

3033
## Example - Organize FormItems into Groups
3134

@@ -36,56 +39,42 @@ You can organize some FormItems into logical groups. You can configure the label
3639
![FormItem example](images/formgroups-example.png)
3740

3841
````RAZOR
39-
@* Organize items into groups *@
40-
41-
@using System.ComponentModel.DataAnnotations
42-
43-
<TelerikForm Model="@person" Columns="2" ColumnSpacing="25px">
44-
<FormValidation>
45-
<DataAnnotationsValidator></DataAnnotationsValidator>
46-
</FormValidation>
42+
<TelerikForm Model="@Employee" Columns="2" ColumnSpacing="24px">
4743
<FormItems>
48-
<FormGroup LabelText="Personal Information" Columns="2" ColumnSpacing="15px">
49-
<FormItem LabelText="First Name" Field="@nameof(Person.FirstName)"></FormItem>
50-
<FormItem LabelText="Last Name" Field="@nameof(Person.LastName)"></FormItem>
51-
<FormItem LabelText="Age" Field="@nameof(Person.Age)" ColSpan="2"></FormItem>
52-
<FormItem LabelText="Email" Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
44+
<FormGroup LabelText="Personal Information" Columns="2" ColumnSpacing="12px" RowSpacing="6px">
45+
<FormItem Field="@nameof(Person.FirstName)" LabelText="First Name" />
46+
<FormItem Field="@nameof(Person.LastName)" LabelText="Last Name" />
47+
<FormItem Field="@nameof(Person.BirthDate)" LabelText="Birth Date" ColSpan="2"></FormItem>
48+
<FormItem Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
5349
</FormGroup>
54-
<FormGroup LabelText="Employee Information">
55-
<FormItem LabelText="Company Name" Field="@nameof(Person.CompanyName)"></FormItem>
56-
<FormItem LabelText="Position" Field="@nameof(Person.Position)"></FormItem>
50+
<FormGroup LabelText="Employee Information" Columns="1" RowSpacing="6px">
51+
<FormItem Field="@nameof(Person.CompanyName)" LabelText="Company Name" />
52+
<FormItem Field="@nameof(Person.Position)" />
53+
<FormItem Field="@nameof(Person.HirehDate)" LabelText="Hire Date" />
5754
</FormGroup>
5855
</FormItems>
5956
</TelerikForm>
6057
6158
@code {
62-
public Person person { get; set; } = new Person();
59+
private Person Employee { get; set; } = new();
6360
6461
public class Person
6562
{
66-
[Required(ErrorMessage = "The First name is required")]
67-
public string FirstName { get; set; }
68-
[Required(ErrorMessage = "The Last name is required")]
69-
public string LastName { get; set; }
70-
[Range(18, 120, ErrorMessage = "The age should be between 18 and 120")]
71-
public int Age { get; set; }
72-
[Required]
73-
[EmailAddress(ErrorMessage = "Enter a valid email")]
74-
public string Email { get; set; }
75-
[Required]
76-
public string CompanyName { get; set; }
77-
[MaxLength(25, ErrorMessage = "The position can be maximum 25 characters long")]
78-
public string Position { get; set; }
63+
public string FirstName { get; set; } = string.Empty;
64+
public string LastName { get; set; } = string.Empty;
65+
public DateTime? BirthDate { get; set; }
66+
public string Email { get; set; } = string.Empty;
67+
public string CompanyName { get; set; } = string.Empty;
68+
public string Position { get; set; } = string.Empty;
69+
public DateTime HirehDate { get; set; } = DateTime.Today;
7970
}
8071
}
8172
````
8273

8374
## See Also
8475

85-
* [Overview](slug:form-overview)
86-
* [FormItems](slug:form-formitems)
87-
* [Template](slug:form-formitems-template)
88-
* [Orientation](slug:form-orientation)
89-
* [Events](slug:form-events)
90-
91-
76+
* [Overview](slug:form-overview)
77+
* [FormItems](slug:form-formitems)
78+
* [Template](slug:form-formitems-template)
79+
* [Orientation](slug:form-orientation)
80+
* [Events](slug:form-events)

‎components/form/overview.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -203,12 +203,13 @@ You can customize the editors further through the [form items](slug:form-formite
203203

204204
The [Blazor Form](https://demos.telerik.com/blazor-ui/form/overview) exposes multiple parameters that allow you to customize its layout. Besides the parameters below, the Form component also allows you to [define a completely custom layout with HTML markup and Razor components](slug:form-formitems-formitemstemplate).
205205

206-
| Parameter | Type and Default value | Description |
207-
|-----------|------------------------|-------------|
208-
| `ButtonsLayout` | `FormButtonsLayout` enum <br /> (`Start`) | Determines the position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). |
209-
| `Columns` | `int` | Defines the number of columns in the Form. See the [Columns](slug:form-columns) article for more information |
210-
| `ColumnSpacing` | `string` | Defines the amout of horizontal space between the Columns. See the [Columns](slug:form-columns) article for more information. |
211-
| `Orientation` | `FormOrientation` enum <br /> (`Vertical`) | Determines the position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. |
206+
| Parameter | Type and Default&nbsp;value | Description |
207+
| --- | --- | --- |
208+
| `ButtonsLayout` | `FormButtonsLayout` enum <br /> (`Start`) | The position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). |
209+
| `Columns` | `int` | The number of columns in the Form. See the [Columns](slug:form-columns) article for more information |
210+
| `ColumnSpacing` | `string` (`"32px"`) | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. |
211+
| `Orientation` | `FormOrientation` enum <br /> (`Vertical`) | The position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. |
212+
| `RowSpacing` | `string` | The amout of vertical space between the rows. The default value is zero, but there is a default top margin for Form items. This parameter has effect only when `Columns` is set. |
212213

213214
### Styling and Appearance
214215

0 commit comments

Comments
 (0)