Skip to content

Commit f1a9d96

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 476fef6 commit f1a9d96

File tree

12 files changed

+2465
-15
lines changed

12 files changed

+2465
-15
lines changed

‎docs-aspnet/html-helpers/layout/form/getting-started-form.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,7 @@ Referencing existing component instances allows you to build on top of their con
342342
* [Handling JavaScript Events of the User Interactions]({% slug form_events %})
343343
* [Configuring the Grouping in the Form]({% slug htmlhelpers_form_aspnetcore_groups %})
344344
* [Setting the Orientation of the Labels]({% slug htmlhelpers_form_aspnetcore_orientation %})
345+
* [Creating a Responsive Layout]({% slug htmlhelpers_form_aspnetcore_responsive %})
345346

346347
## See Also
347348

‎docs-aspnet/html-helpers/layout/form/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ The following example demonstrates how to define the Form.
108108
| [Groups]({% slug htmlhelpers_form_aspnetcore_groups %})| The Form allows you to group the input fields in logical sections. |
109109
| [Buttons]({% slug form_aspnetcore_buttons %})| Alter the **Submit** and **Clear** buttons appearance. |
110110
| [Orientation]({% slug htmlhelpers_form_aspnetcore_orientation %})| You can choose between a `vertical` or `horizontal` orientation of the labels in the Form. |
111+
| [Responsive Form]({% slug htmlhelpers_form_aspnetcore_responsive %})| Configure column spans and breakpoints to make the Form responsive on various screen sizes. |
111112
| [Validation]({% slug htmlhelpers_form_aspnetcore_validation %})| The Form has a built-in validator to enable seamless client-side validaiton. |
112113
| [Hidden Fields]({% slug htmlhelpers_form_aspnetcore_hiddenfields %})| You can hide specific fields, like the `ID`. |
113114
| [Accessibility]({% slug htmlhelpers_form_accessibility %})| The component is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_form %}) for faster navigation. |

‎docs-aspnet/html-helpers/layout/form/responsive.md‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
---
2+
title: Responsive Form
3+
page_title: Responsive Form
4+
description: "Get started with the Telerik UI Form component for {{ site.framework }} and learn how to build responsive forms using the grid layout configuration."
5+
slug: htmlhelpers_form_aspnetcore_responsive
6+
position: 8
7+
---
8+
9+
# Responsive Form
10+
11+
The Form component in {{ site.framework }} provides responsive layouts using a flexible grid structure. The responsive layout automatically adapts to various screen sizes, ensuring optimal usability of the Form across desktop, tablet, and mobile devices.
12+
13+
To enable responsive behavior, set the `Layout()` option to `"grid"` and configure the desired breakpoints through the `Cols()` configuration.
14+
15+
You can control the width and arrangement of form items and groups based on screen width by using the `ColSpan()` method, which dynamically adjusts the layout as the viewport changes.
16+
17+
## Breakpoint Configuration
18+
19+
Define responsive breakpoints through the `Cols()` configuration inside the `Grid()` method. Each breakpoint includes a `MinWidth`, `MaxWidth`, and a `value` that represents the number of columns in the grid.
20+
21+
```HtmlHelper
22+
.Grid(g => g.Cols(c =>
23+
{
24+
c.Add().MaxWidth(500).Value(3);
25+
c.Add().MinWidth(501).MaxWidth(768).Value(6);
26+
c.Add().MinWidth(769).Value(12);
27+
}))
28+
```
29+
30+
{% if site.core %}
31+
```TagHelper
32+
<cols>
33+
<col max-width="500" value="3" />
34+
<col min-width="501" max-width="768" value="6" />
35+
<col min-width="769" value="12" />
36+
</cols>
37+
```
38+
{% endif %}
39+
40+
By default, three breakpoints define the Form columns as follows:
41+
42+
|| **Small** | **Medium** | **Large** |
43+
|-------|-------|--------|-------|
44+
**Dimensions** | up to 500px | 501px to 768px | over 768px |
45+
**Columns** | 3 | 6 | 12 |
46+
47+
The following example shows hot to set a fixed ColSpan for a field.
48+
49+
```HtmlHelper
50+
i.Add().Field(f => f.Email)
51+
.Label("Email")
52+
.ColSpan(3)
53+
.Editor(e => e.TextBox());
54+
```
55+
56+
{% if site.core %}
57+
```TagHelper
58+
<form-item field="Email" col-span="3">
59+
<item-label text="Email" />
60+
<textbox-editor />
61+
</form-item>
62+
```
63+
{% endif %}
64+
65+
## ColSpan on Groups
66+
67+
You can apply `ColSpan()` option to Form [groups](slug:htmlhelpers_form_aspnetcore_groups) to define their width in the parent layout.
68+
69+
```HtmlHelper
70+
items.AddGroup()
71+
.Label("Shipping Address")
72+
.Layout("grid")
73+
.ColSpan(6)
74+
.Items(i =>
75+
{
76+
i.Add().Field(f => f.Country)
77+
.Label("Country")
78+
.ColSpan(3);
79+
i.Add().Field(f => f.City)
80+
.Label("City")
81+
.ColSpan(3);
82+
});
83+
```
84+
85+
{% if site.core %}
86+
```TagHelper
87+
<form-item type="group" label="Personal Info" layout="grid" col-span="6">
88+
<form-items>
89+
<form-item field="FullName" col-span="3">
90+
<item-label text="Full name" />
91+
<textbox-editor />
92+
</form-item>
93+
<form-item field="Email" col-span="3">
94+
<item-label text="Email" />
95+
<textbox-editor />
96+
</form-item>
97+
</form-items>
98+
</form-item>
99+
```
100+
{% endif %}
101+
102+
The example below demonstrates a responsive Form with multiple groups.
103+
104+
```HtmlHelper
105+
106+
@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.ResponsiveFormViewModel>()
107+
.Name("responsiveForm")
108+
.HtmlAttributes(new { method = "POST" })
109+
.Layout("grid")
110+
.ClearButton(false)
111+
.Grid(g => g.Cols(c =>
112+
{
113+
c.Add().MaxWidth(500).Value(3);
114+
c.Add().MinWidth(501).MaxWidth(768).Value(6);
115+
c.Add().MinWidth(769).Value(12);
116+
}))
117+
.Validatable(v =>
118+
{
119+
v.ValidateOnBlur(true);
120+
v.ValidationSummary(vs => vs.Enable(false));
121+
})
122+
.Items(items =>
123+
{
124+
items.AddGroup()
125+
.Label("Personal Info")
126+
.Layout("grid")
127+
.ColSpan(6)
128+
.Items(i =>
129+
{
130+
i.Add().Field(f => f.FullName)
131+
.Label("Full name")
132+
.ColSpan(3)
133+
.Editor(e => e.TextBox());
134+
135+
i.Add().Field(f => f.Email)
136+
.Label("Email")
137+
.ColSpan(3)
138+
.Editor(e => e.TextBox());
139+
});
140+
141+
items.AddGroup()
142+
.Label("Address")
143+
.Layout("grid")
144+
.ColSpan(6)
145+
.Items(i =>
146+
{
147+
i.Add().Field(f => f.Country)
148+
.Label("Country")
149+
.ColSpan(3)
150+
.Editor(e => e.ComboBox()
151+
.Placeholder("EU Country")
152+
.BindTo(new[] { "France", "Germany", "Italy", "Spain", "Bulgaria" }));
153+
154+
i.Add().Field(f => f.City)
155+
.Label("City")
156+
.ColSpan(3)
157+
.Editor(e => e.TextBox());
158+
});
159+
}))
160+
```
161+
162+
{% if site.core %}
163+
```TagHelper
164+
165+
@addTagHelper *, Kendo.Mvc
166+
@model Kendo.Mvc.Examples.Models.Form.ResponsiveFormViewModel
167+
168+
<kendo-form name="responsiveForm" layout="grid" clear-button="false">
169+
<grid>
170+
<cols>
171+
<col max-width="500" value="3" />
172+
<col min-width="501" max-width="768" value="6" />
173+
<col min-width="769" value="12" />
174+
</cols>
175+
</grid>
176+
<validatable validate-on-blur="true">
177+
<validation-summary enable="false" />
178+
</validatable>
179+
<form-items>
180+
<form-item type="group" label="Personal Info" layout="grid" col-span="6">
181+
<form-items>
182+
<form-item field="FullName" col-span="3">
183+
<item-label text="Full name" />
184+
<textbox-editor />
185+
</form-item>
186+
<form-item field="Email" col-span="3">
187+
<item-label text="Email" />
188+
<textbox-editor />
189+
</form-item>
190+
</form-items>
191+
</form-item>
192+
<form-item type="group" label="Address" layout="grid" col-span="6">
193+
<form-items>
194+
<form-item field="Country" col-span="3">
195+
<item-label text="Country" />
196+
<combobox-editor placeholder="EU Country" bind-to="@ViewBag.CountryData" />
197+
</form-item>
198+
<form-item field="City" col-span="3">
199+
<item-label text="City" />
200+
<textbox-editor />
201+
</form-item>
202+
</form-items>
203+
</form-item>
204+
</form-items>
205+
</kendo-form>
206+
```
207+
{% endif %}
208+
209+
## Best Practices
210+
211+
When implementing column spanning in the forms, consider the following recommendations:
212+
213+
- Start Mobile-First&mdash;Define responsive breakpoints starting from the smallest screen size and working up to larger viewports.
214+
- Balance ColSpans&mdash;Ensure that all items in a row do not exceed the total grid column width.
215+
- Use Groups&mdash;Group related fields to provide logical structure and improve UX.
216+
- Adjust for Content&mdash;Give more space to fields like addresses or longer inputs.
217+
- Test Across Devices&mdash;Verify that the responsive columns appear as expected across different screen sizes and orientations.
218+
219+
## See Also
220+
221+
* [Creating Responsive Form for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/form/responsive-form)
222+
* [Server-Side API of the Form](/api/form)
223+
{% if site.core %}
224+
* [Server-Side TagHelper API of the Form](/api/taghelpers/form)
225+
{% endif %}

‎docs-aspnet/styles-and-layout/sass-themes/compatibility.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ The following table lists the Telerik UI for {{ site.framework }} versions and t
1010

1111
| Telerik UI for {{ site.framework }} | Kendo UI Sass Themes |
1212
|:--- |:--- |
13+
| Telerik UI 2025.3.812 (Q3 2025.3.812) | @progress/kendo-theme-bootstrap@11.3.2<br>@progress/kendo-theme-classic@11.3.2<br>@progress/kendo-theme-default@11.3.2<br>@progress/kendo-theme-fluent@11.3.2<br>@progress/kendo-theme-material@11.3.2 |
1314
| Telerik UI 2025.2.702 (2025.2.702) | @progress/kendo-theme-bootstrap@11.0.2<br>@progress/kendo-theme-classic@11.0.2<br>@progress/kendo-theme-default@11.0.2<br>@progress/kendo-theme-fluent@11.0.2<br>@progress/kendo-theme-material@11.0.2 |
1415
| Telerik UI 2025.2.520 (Q2 2025.2.520) | @progress/kendo-theme-bootstrap@11.0.2<br>@progress/kendo-theme-classic@11.0.2<br>@progress/kendo-theme-default@11.0.2<br>@progress/kendo-theme-fluent@11.0.2<br>@progress/kendo-theme-material@11.0.2 |
1516
| Telerik UI 2025.1.227 (2025.1.227) | @progress/kendo-theme-bootstrap@10.2.0<br>@progress/kendo-theme-classic@10.2.0<br>@progress/kendo-theme-default@10.2.0<br>@progress/kendo-theme-fluent@10.2.0<br>@progress/kendo-theme-material@10.2.0 |

0 commit comments

Comments
 (0)