Skip to content

Commit 332eec0

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent a3b735b commit 332eec0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+1679
-264
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,11 @@ defaults:
331331
path: "html-helpers/layout/badge"
332332
values:
333333
title_prefix: "MVC Badge Component"
334+
-
335+
scope:
336+
path: "html-helpers/layout/form"
337+
values:
338+
title_prefix: "MVC Form Component"
334339
-
335340
scope:
336341
path: "html-helpers/layout/dialog"

‎docs-aspnet/_config.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,8 @@ navigation:
462462
title: "FlatColorPicker"
463463
"*filemanager":
464464
title: "FileManager"
465+
"*form":
466+
title: "Form"
465467
"*gantt":
466468
title: "Gantt"
467469
"*lineargauge":
@@ -518,6 +520,8 @@ navigation:
518520
title: "TabStrip"
519521
"*textbox":
520522
title: "TextBox"
523+
"*tilelayout":
524+
title: "TileLayout"
521525
"*timeline":
522526
title: "TimeLine"
523527
"*timepicker":
@@ -816,6 +820,11 @@ defaults:
816820
path: "html-helpers/layout/badge"
817821
values:
818822
title_prefix: "Core Badge Component"
823+
-
824+
scope:
825+
path: "html-helpers/layout/form"
826+
values:
827+
title_prefix: "Core Form Component"
819828
-
820829
scope:
821830
path: "html-helpers/layout/dialog"

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the Telerik UI Form HtmlHelper for {{ site.framework }} and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: htmlhelpers_form_aspnetcore_accessibility
6+
position: 1
7+
---
8+
9+
# Form Accessibility
10+
11+
The Form is accessible by screen readers and provides WAI-ARIA, Section 508, and WCAG 2.1 support.
12+
13+
For more information, refer to:
14+
15+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
16+
17+
## WAI-ARIA
18+
19+
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in {{ site.product }}]({% slug overview_accessibility %}#wai-aria).
20+
21+
## Section 508
22+
23+
The Form is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in {{ site.product }}]({% slug overview_accessibility %}#section-508).
24+
25+
## WCAG 2.1
26+
27+
The Form supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21).
28+
29+
## See Also
30+
31+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
title: Groups
3+
page_title: Groups
4+
description: "Get started with the Telerik UI Form HtmlHelper for {{ site.framework }} and learn how to set up groups."
5+
slug: htmlhelpers_form_aspnetcore_groups
6+
position: 5
7+
---
8+
9+
# Groups
10+
11+
The grouping functionality of the Form allows you to create more intuitive forms by displaying fields in logical grouped sections.
12+
13+
The following example shows a Form configured to display its editors in two groups.
14+
15+
```Razor
16+
@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.FormOrderViewModel>()
17+
.Name("exampleForm")
18+
.HtmlAttributes(new { action = "Groups", method = "POST" })
19+
.Validatable(v =>
20+
{
21+
v.ValidateOnBlur(true);
22+
v.ValidationSummary(vs => vs.Enable(false));
23+
})
24+
.Items(items =>
25+
{
26+
items.AddGroup()
27+
.Label("Personal Information")
28+
.Layout("grid")
29+
.Items(i =>
30+
{
31+
i.Add()
32+
.Field(f => f.FirstName)
33+
.Label(l => l.Text("First Name:"));
34+
i.Add()
35+
.Field(f => f.LastName)
36+
.Label(l => l.Text("Last Name:"));
37+
i.Add()
38+
.Field(f => f.Email)
39+
.Label(l => l.Text("Email:"));
40+
});
41+
42+
items.AddGroup()
43+
.Label("Shipping Address")
44+
.Layout("grid")
45+
.Items(i =>
46+
{
47+
i.Add()
48+
.Field(f => f.ShipCountry)
49+
.Label(l => l.Text("Country:"))
50+
.Editor(e =>
51+
{
52+
e.ComboBox()
53+
.DataTextField("Text")
54+
.DataValueField("Value")
55+
.BindTo(new List<SelectListItem>() {
56+
new SelectListItem() {
57+
Text = "France", Value = "1"
58+
},
59+
new SelectListItem() {
60+
Text = "Germany", Value = "2"
61+
},
62+
new SelectListItem() {
63+
Text = "Italy", Value = "3"
64+
},
65+
new SelectListItem() {
66+
Text = "Spain", Value = "4"
67+
}
68+
});
69+
});
70+
i.Add()
71+
.Field(f => f.City)
72+
.Label(l => l.Text("City:"));
73+
i.Add()
74+
.Field(f => f.Address)
75+
.Label(l => l.Text("Address Line:"));
76+
});
77+
78+
items.Add()
79+
.Field(f => f.Agree)
80+
.Label(l => l.Text("Agree to Terms:"));
81+
})
82+
)
83+
```
84+
85+
> The Form does not support group nesting.
86+
87+
## See Also
88+
89+
* [Groups Demo of the Form HtmlHelper for {{ site.framework }}](https://demos.telerik.com/{{ site.platform }}/form/groups)
90+
* [Server-Side API](/api/form)

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

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: Items
3+
page_title: Items
4+
description: "Get started with the Telerik UI Form HtmlHelper for {{ site.framework }} and learn how to configure items."
5+
slug: htmlhelpers_form_aspnetcore_items
6+
position: 2
7+
---
8+
9+
# Items
10+
11+
The `Items` configuration options allows you to customize the appearance and behavior of the Form. The `Items` configuration maps the model fields and through it you can:
12+
13+
* customize the editors
14+
* customize the labels and hints of the editors
15+
* group the editors
16+
17+
## Configure Label
18+
19+
The following example shows how to set the `Label` of an item. Enabling the `Optional` setting, indicates that the field is optional (not required).
20+
21+
```Razor
22+
@(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
23+
.Name("formExample")
24+
.HtmlAttributes(new { action = "Index", method = "POST" })
25+
.Items(items =>
26+
{
27+
items.Add()
28+
.Field(f => f.FirstName)
29+
.Label(l => l.Text("First Name:"));
30+
items.Add()
31+
.Field(f => f.LastName)
32+
.Label(l => l.Text("Last Name:"));
33+
i.Add()
34+
.Field(f => f.DateOfBirth)
35+
.Label(l => l.Text("Date of Birth:").Optional(true));
36+
})
37+
)
38+
```
39+
40+
## Configure Hint
41+
42+
The following example shows how to set the `Hint` of an item. The hint is displayed below the editor of the field.
43+
44+
```Razor
45+
@(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
46+
.Name("formExample")
47+
.HtmlAttributes(new { action = "Index", method = "POST" })
48+
.Items(items =>
49+
{
50+
items.Add()
51+
.Field(f => f.FirstName)
52+
.Label(l => l.Text("First Name:"));
53+
items.Add()
54+
.Field(f => f.LastName)
55+
.Label(l => l.Text("Last Name:"));
56+
items.Add()
57+
.Field(f => f.Password)
58+
.Label(l => l.Text("Password:"))
59+
.Hint("Hint: enter alphanumeric characters only.");
60+
})
61+
)
62+
```
63+
64+
## Configure Editor
65+
66+
With the `Editor` option you can explicitly configure an editor to be used for a specific field. See the [editor](https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemseditor) configuration option in the client-side API documentation, for a list of the supported editors.
67+
68+
```Razor
69+
@(Html.Kendo().Form<MyApplication.Models.FormItemsViewModels>()
70+
.Name("exampleForm")
71+
.HtmlAttributes(new { action = "Items", method = "POST" })
72+
.Items(items =>
73+
{
74+
items.AddGroup()
75+
.Label("Registration Form")
76+
.Items(i =>
77+
{
78+
i.Add()
79+
.Field(f => f.TextBox)
80+
.Label(l => l.Text("TextBox:"));
81+
i.Add()
82+
.Field(f => f.NumericTextBox)
83+
.Label(l => l.Text("NumericTextBox:"))
84+
.Editor(e =>
85+
{
86+
e.NumericTextBox();
87+
});
88+
i.Add()
89+
.Field(f => f.MaskedTextBox)
90+
.Label(l => l.Text("MaskedTextBox:").Optional(true))
91+
.Editor(e =>
92+
{
93+
e.MaskedTextBox();
94+
});
95+
i.Add()
96+
.Field(f => f.DatePicker)
97+
.Label(l => l.Text("DatePicker:").Optional(true));
98+
i.Add()
99+
.Field(f => f.DateTimePicker)
100+
.Label(l => l.Text("DateTimePicker:").Optional(true))
101+
.Editor(e => e.DateTimePicker()
102+
.HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
103+
.DateInput()
104+
);
105+
i.Add()
106+
.Field(f => f.ComboBox)
107+
.Label(l => l.Text("ComboBox:").Optional(true))
108+
.Editor(e =>
109+
{
110+
e.ComboBox()
111+
.HtmlAttributes(new { })
112+
.Placeholder("Select...")
113+
.DataTextField("ProductName")
114+
.DataValueField("ProductID")
115+
.HtmlAttributes(new { style = "width:100%" })
116+
.Height(520)
117+
.DataSource(source =>
118+
{
119+
source.Read(read =>
120+
{
121+
read.Action("Items_GetProducts", "Form");
122+
})
123+
.ServerFiltering(true);
124+
});
125+
});
126+
i.Add()
127+
.Field(f => f.Switch)
128+
.Label(l => l.Text("Switch:"))
129+
.Editor(e =>
130+
{
131+
e.Switch()
132+
.Messages(c => c.Checked("YES").Unchecked("NO"));
133+
});;
134+
135+
});
136+
})
137+
)
138+
```
139+
140+
## See Also
141+
142+
* [Items Demo of the Form HtmlHelper for {{ site.framework }}](https://demos.telerik.com/{{ site.platform }}/form/items)
143+
* [Server-Side API](/api/form)

0 commit comments

Comments
 (0)