From dc4ba345696364407717d0430623e9a0cc67814d Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 15 Jul 2025 15:07:28 +0300 Subject: [PATCH 1/4] docs(Form): Add information about RowSpacing --- components/form/columns.md | 22 +++++++++++----------- components/form/formgroups.md | 23 +++++++++++------------ components/form/overview.md | 9 +++++---- 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/components/form/columns.md b/components/form/columns.md index 593299930d..84e6aa29b7 100644 --- a/components/form/columns.md +++ b/components/form/columns.md @@ -18,24 +18,24 @@ The Form component for Blazor allows you to add multiple columns by using the `C 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`. ````RAZOR -@* Add colums to the Form component *@ - - + @code { - public Person person = new Person(); + private Person Employee { get; set; } = new(); public class Person { public int Id { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20); - public string CompanyName { get; set; } - public DateTime HireDate { get; set; } - public bool IsOnVacation { get; set; } = true; + public string FirstName { get; set; } = string.Empty; + public string LastName { get; set; } = string.Empty; + public DateTime DOB { get; set; } = DateTime.Today.AddYears(-18); + public string CompanyName { get; set; } = string.Empty; + public DateTime HireDate { get; set; } = DateTime.Today; + public bool IsOnVacation { get; set; } } } ```` diff --git a/components/form/formgroups.md b/components/form/formgroups.md index 5919bfc08b..c48fa6d034 100644 --- a/components/form/formgroups.md +++ b/components/form/formgroups.md @@ -21,11 +21,12 @@ In this article: The `FormGroup` tag exposes the following parameters: -* `LabelText` - `string` - defines a label for the entire group. - -* `Columns` - `int` - defines the number of columns in the group. - -* `ColumnSpacing` - `string` - defines the horizontal space between the editors in the group. +| Parameter | Type | Description | +| --- | --- | --- | +| `LabelText` | `string` | The label for the entire group rendered as a `` element in a `
`. | +| `Columns` | `int` | The number of columns in the group. | +| `ColumnSpacing` | `string` | The horizontal space between the columns in the group. | +| `RowSpacing` | `string` | The vertical space between the fields in the group. | ## Example - Organize FormItems into Groups @@ -82,10 +83,8 @@ You can organize some FormItems into logical groups. You can configure the label ## See Also - * [Overview](slug:form-overview) - * [FormItems](slug:form-formitems) - * [Template](slug:form-formitems-template) - * [Orientation](slug:form-orientation) - * [Events](slug:form-events) - - +* [Overview](slug:form-overview) +* [FormItems](slug:form-formitems) +* [Template](slug:form-formitems-template) +* [Orientation](slug:form-orientation) +* [Events](slug:form-events) diff --git a/components/form/overview.md b/components/form/overview.md index 989fe67a82..329c37d070 100644 --- a/components/form/overview.md +++ b/components/form/overview.md @@ -205,10 +205,11 @@ The [Blazor Form](https://demos.telerik.com/blazor-ui/form/overview) exposes mul | Parameter | Type and Default value | Description | |-----------|------------------------|-------------| -| `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | Determines the position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | -| `Columns` | `int` | Defines the number of columns in the Form. See the [Columns](slug:form-columns) article for more information | -| `ColumnSpacing` | `string` | Defines the amout of horizontal space between the Columns. See the [Columns](slug:form-columns) article for more information. | -| `Orientation` | `FormOrientation` enum
(`Vertical`) | Determines the position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. | +| `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | The position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | +| `Columns` | `int` | The number of columns in the Form. See the [Columns](slug:form-columns) article for more information | +| `ColumnSpacing` | `string` | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. | +| `Orientation` | `FormOrientation` enum
(`Vertical`) | The position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. | +| `RowSpacing` | `string` | The amout of vertical space between the rows. | ### Styling and Appearance From 0f237bb866658aa3ca50105d8115ec478406aa02 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 15 Jul 2025 15:18:56 +0300 Subject: [PATCH 2/4] Update components/form/formgroups.md --- components/form/formgroups.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/form/formgroups.md b/components/form/formgroups.md index c48fa6d034..6d9a3dd318 100644 --- a/components/form/formgroups.md +++ b/components/form/formgroups.md @@ -21,6 +21,8 @@ In this article: The `FormGroup` tag exposes the following parameters: +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + | Parameter | Type | Description | | --- | --- | --- | | `LabelText` | `string` | The label for the entire group rendered as a `` element in a `
`. | From 4e58b4c1f031a84eb2cc113d159032c978bd9058 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 16 Jul 2025 16:54:13 +0300 Subject: [PATCH 3/4] RowSpacing continued --- components/form/columns.md | 8 ++++-- components/form/formgroups.md | 54 ++++++++++++++--------------------- components/form/overview.md | 6 ++-- 3 files changed, 29 insertions(+), 39 deletions(-) diff --git a/components/form/columns.md b/components/form/columns.md index 84e6aa29b7..a7793a2bfc 100644 --- a/components/form/columns.md +++ b/components/form/columns.md @@ -15,13 +15,15 @@ The Form component for Blazor allows you to add multiple columns by using the `C >caption Add columns to a Form with Automatically generated fields -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`. +You can set the `Columns` parameter when [``](slug:form-formitems-formitemstemplate) is not used and the Form manages its layout. The Form will spread the editors evenly across the columns. + +When using `Columns`, you can also define arbitrary space between the rows with the `RowSpacing` parameter. ````RAZOR + ColumnSpacing="24px" + RowSpacing="24px"> @code { diff --git a/components/form/formgroups.md b/components/form/formgroups.md index 6d9a3dd318..547652ed0d 100644 --- a/components/form/formgroups.md +++ b/components/form/formgroups.md @@ -23,12 +23,12 @@ The `FormGroup` tag exposes the following parameters: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) -| Parameter | Type | Description | +| Parameter | Type and Default Value| Description | | --- | --- | --- | | `LabelText` | `string` | The label for the entire group rendered as a `` element in a `
`. | | `Columns` | `int` | The number of columns in the group. | -| `ColumnSpacing` | `string` | The horizontal space between the columns in the group. | -| `RowSpacing` | `string` | The vertical space between the fields in the group. | +| `ColumnSpacing` | `string` (`"16px"`) | The horizontal space between the columns in the group. | +| `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. | ## Example - Organize FormItems into Groups @@ -39,46 +39,34 @@ You can organize some FormItems into logical groups. You can configure the label ![FormItem example](images/formgroups-example.png) ````RAZOR -@* Organize items into groups *@ - -@using System.ComponentModel.DataAnnotations - - - - - + - - - - - + + + + + - - - + + + + @code { - public Person person { get; set; } = new Person(); + private Person Employee { get; set; } = new(); public class Person { - [Required(ErrorMessage = "The First name is required")] - public string FirstName { get; set; } - [Required(ErrorMessage = "The Last name is required")] - public string LastName { get; set; } - [Range(18, 120, ErrorMessage = "The age should be between 18 and 120")] - public int Age { get; set; } - [Required] - [EmailAddress(ErrorMessage = "Enter a valid email")] - public string Email { get; set; } - [Required] - public string CompanyName { get; set; } - [MaxLength(25, ErrorMessage = "The position can be maximum 25 characters long")] - public string Position { get; set; } + public string FirstName { get; set; } = string.Empty; + public string LastName { get; set; } = string.Empty; + public DateTime? BirthDate { get; set; } + public string Email { get; set; } = string.Empty; + public string CompanyName { get; set; } = string.Empty; + public string Position { get; set; } = string.Empty; + public DateTime HirehDate { get; set; } = DateTime.Today; } } ```` diff --git a/components/form/overview.md b/components/form/overview.md index 329c37d070..9a6bdb88fe 100644 --- a/components/form/overview.md +++ b/components/form/overview.md @@ -203,13 +203,13 @@ You can customize the editors further through the [form items](slug:form-formite 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). -| Parameter | Type and Default value | Description | +| Parameter | Type and Default value | Description | |-----------|------------------------|-------------| | `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | The position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | | `Columns` | `int` | The number of columns in the Form. See the [Columns](slug:form-columns) article for more information | -| `ColumnSpacing` | `string` | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. | +| `ColumnSpacing` | `string` (`"32px"`) | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. | | `Orientation` | `FormOrientation` enum
(`Vertical`) | The position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. | -| `RowSpacing` | `string` | The amout of vertical space between the rows. | +| `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. | ### Styling and Appearance From 4bbf5b17ba4112c62b52993205784373bd6d5f64 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 16 Jul 2025 16:56:13 +0300 Subject: [PATCH 4/4] RowSpacing continued 2 --- components/form/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/form/overview.md b/components/form/overview.md index 9a6bdb88fe..82522398e3 100644 --- a/components/form/overview.md +++ b/components/form/overview.md @@ -204,7 +204,7 @@ You can customize the editors further through the [form items](slug:form-formite 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). | Parameter | Type and Default value | Description | -|-----------|------------------------|-------------| +| --- | --- | --- | | `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | The position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | | `Columns` | `int` | The number of columns in the Form. See the [Columns](slug:form-columns) article for more information | | `ColumnSpacing` | `string` (`"32px"`) | The amout of horizontal space between the columns. See the [Columns](slug:form-columns) article for more information. |