Skip to content

Commit 10b21b4

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent f26c905 commit 10b21b4

File tree

25 files changed

+1010
-3
lines changed

25 files changed

+1010
-3
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,11 @@ defaults:
393393
path: "html-helpers/navigation/stepper"
394394
values:
395395
title_prefix: "MVC Stepper Component"
396+
-
397+
scope:
398+
path: "html-helpers/navigation/wizard"
399+
values:
400+
title_prefix: "MVC Wizard Component"
396401
-
397402
scope:
398403
path: "html-helpers/navigation/button"

‎docs-aspnet/_config.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,8 @@ navigation:
343343
title: "Breadcrumb"
344344
"html-helpers/navigation/stepper":
345345
title: "Stepper"
346+
"html-helpers/navigation/wizard":
347+
title: "Wizard"
346348
"html-helpers/navigation/radiobutton":
347349
title: "RadioButton"
348350
"html-helpers/navigation/menu/contextmenu":
@@ -883,6 +885,11 @@ defaults:
883885
path: "html-helpers/navigation/stepper"
884886
values:
885887
title_prefix: "Core Stepper Component"
888+
-
889+
scope:
890+
path: "html-helpers/navigation/wizard"
891+
values:
892+
title_prefix: "Core Wizard Component"
886893
-
887894
scope:
888895
path: "html-helpers/navigation/button"
@@ -1238,6 +1245,11 @@ defaults:
12381245
path: "tag-helpers/navigation/stepper"
12391246
values:
12401247
title_prefix: "Core Stepper Component"
1248+
-
1249+
scope:
1250+
path: "tag-helpers/navigation/wizard"
1251+
values:
1252+
title_prefix: "Core Wizard Component"
12411253
-
12421254
scope:
12431255
path: "tag-helpers/navigation/button"

‎docs-aspnet/html-helpers/navigation/wizard/accessibility/keyboard-navigation.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product }} Wizard and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_aspnetcore_wizard
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the Wizard is always available.
12+
13+
The Wizard widget itself is not focusable, but its elements (Stepper, steps and focusable elements within each step content) are part of the tab sequence on the page. Thus, when navigating with the Tab key, the selected Step will be focused within the Wizard widget. For a complete example, refer to the [demo on keyboard navigation of the Wizard](https://demos.telerik.com/{{ site.platform }}/wizard/keyboard-navigation).
14+
15+
Telerik UI Wizard HtmlHelper for {{ site.framework }} supports the following keyboard shortcuts:
16+
17+
| SHORTCUT | DESCRIPTION |
18+
|:--- |:--- |
19+
| `Left arrow` or `Up arrow` | Focuses previous Step |
20+
| `Right arrow` or `Down arrow` | Focuses next Step |
21+
| `Home` | Focuses first Step if the lenear configuration of the Stepper is disabled |
22+
| `End` | Focuses last Step if the lenear configuration of the Stepper is disabled |
23+
| `Tab` | Focuses the next element in the tab sequence |
24+
| `Shift`+`Tab` | Focuses the previous element in the tab sequence |
25+
26+
## See Also
27+
28+
* [Keyboard Navigation in the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/keyboard-navigation)
29+
* [Accessibility in the Wizard HtmlHelper for {{ site.framework }}]({% slug accessibility_aspnetcore_wizard %})

‎docs-aspnet/html-helpers/navigation/wizard/accessibility/overview.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the {{ site.product }} Wizard by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_aspnetcore_wizard
6+
position: 1
7+
---
8+
9+
# Wizard Accessibility
10+
11+
The Wizard is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Keyboard navigation by the Telerik UI Wizard]({% slug keynav_aspnetcore_wizard %})
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 Wizard 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 Wizard 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+
* [Keyboard Navigation by the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/keyboard-navigation)
32+
* [Keyboard Navigation by the Wizard HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_wizard %})
33+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})

‎docs-aspnet/html-helpers/navigation/wizard/content.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Content
3+
page_title: Content
4+
description: "Get started with the Telerik UI Wizard HtmlHelper for {{ site.framework }} and learn how to set its content."
5+
slug: htmlhelpers_wizard_aspnetcore_content
6+
position: 3
7+
---
8+
9+
# Content
10+
11+
The {{ site.product }} Wizard provides options for loading content via AJAX or defining local content.
12+
13+
## Loading Content with AJAX
14+
15+
The {{ site.product }} Wizard provides built-in support for asynchronously loading content from remote URLs via the `ContentUrl` configuration option. Those endpoints should return HTML content that will be loaded in the content area of respective step of the Wizard. When content is loaded via AJAX the Wizard allows the user to configure whether each step content will be loaded only when it is selected via the `LoadOnDemand` configuration option. Otherwise, all steps will be initially laded with the Wizard rendering. It is possible to also configure whether the step content will be reloaded on each navigation to a given Step via the `ReloadOnSelect` configuration option.
16+
For a complete example, refer to the [demo on loading Wizard content with AJAX](https://demos.telerik.com/{{ site.platform }}/wizard/ajax).
17+
18+
## Loading Local Content
19+
20+
### Loading Local Content via the Built-in Form Configuration
21+
22+
The {{ site.product }} Wizard integrates the {{ site.product }} Form and supports all its configuration options. For further details on Form functionality and configuration options refer to the [Form documentation section]({% slug htmlhelpers_form_aspnetcore_overview %}).
23+
24+
```Razor
25+
@(Html.Kendo().Wizard()
26+
.Name("wizard")
27+
.Steps(s=> {
28+
s.Add<UserViewModel>()
29+
.Title("User Details")
30+
.Form(form =>
31+
{
32+
form.FormData(Model);
33+
form.Items(itm =>
34+
{
35+
itm.Add().Field(f => f.UserName);
36+
itm.Add().Field(f => f.Email);
37+
itm.Add().Field(f => f.Password);
38+
});
39+
});
40+
s.Add<UserViewModel>()
41+
.Title("Personal Details")
42+
.Form(form =>
43+
{
44+
form.FormData(Model);
45+
form.Items(itm =>
46+
{
47+
itm.Add().Field(f => f.FirstName);
48+
itm.Add().Field(f => f.LastName);
49+
itm.Add().Field(f => f.DateOfBirth);
50+
});
51+
});
52+
})
53+
)
54+
```
55+
56+
### Loading Local HTML Content
57+
58+
The content of each Wizard step can be specified via the Wizard Step `Content` or `ContentId` configuration options. In this way a specific HTML string or a DOM element, specified by its Id, will be used as content:
59+
60+
```Razor
61+
@(Html.Kendo().Wizard()
62+
.Name("wizard")
63+
.Steps(s=> {
64+
s.Add().Content("<h1>Start Registration</h1><br/><br/><br/><h3>Click \"Next\" to start filling-in the form</h3>");
65+
s.Add<UserViewModel>()
66+
.Title("User Details")
67+
.Form(form =>
68+
{
69+
form.FormData(Model);
70+
form.Items(itm =>
71+
{
72+
itm.Add().Field(f => f.UserName);
73+
itm.Add().Field(f => f.Email);
74+
itm.Add().Field(f => f.Password);
75+
});
76+
});
77+
s.Add<UserViewModel>()
78+
.Title("Personal Details")
79+
.Form(form =>
80+
{
81+
form.FormData(Model);
82+
form.Items(itm =>
83+
{
84+
itm.Add().Field(f => f.FirstName);
85+
itm.Add().Field(f => f.LastName);
86+
itm.Add().Field(f => f.DateOfBirth);
87+
});
88+
});
89+
s.Add().ContentId("finalStep");
90+
})
91+
)
92+
93+
<script id="finalStep" type="text/kendo-template">
94+
<h1>Thank you for registering</h1>
95+
<br /><br /><br />
96+
<h3>Click "Done" to complete the registration process</h3>
97+
</script>
98+
```
99+
100+
## See Also
101+
102+
* [Basic Usage of the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/index)
103+
* [Using the API of the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/api)

‎docs-aspnet/html-helpers/navigation/wizard/form-integration.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: Form Integration
3+
page_title: Form Integration
4+
description: "Get started with the Telerik UI Wizard HtmlHelper for {{ site.framework }} and learn how the Wizard integrates with the Telerik UI Form HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_wizard_aspnetcore_form_integration
6+
position: 2
7+
---
8+
9+
# Form Integration
10+
11+
The {{ site.product }} Wizard can be initialized as a `<form>` element or as a `<div>` element. The configuration is set via the `.Tag()` configuration option.
12+
13+
## Initialization as a `<form>` Element
14+
15+
When the {{ site.product }} Wizard is initialized as a `<form>` element the Done button at the last Wizard step will act as a submit button. In this scenario, the Form DOM elements inside the {{ site.product }} Wizard will be rendered as `<div>` elements.
16+
17+
```Razor
18+
@(Html.Kendo().Wizard()
19+
.Name("wizard")
20+
.Tag("form")
21+
.ValidateForms(true)
22+
.Steps(s=> {
23+
s.Add().Content("Initial Step");
24+
s.Add<UserViewModel>()
25+
.Title("User Details")
26+
.Form(form =>
27+
{
28+
form.FormData(Model);
29+
form.Items(itm =>
30+
{
31+
itm.Add().Field(f => f.UserName);
32+
itm.Add().Field(f => f.Email);
33+
itm.Add().Field(f => f.Password);
34+
});
35+
});
36+
s.Add<UserViewModel>()
37+
.Title("Personal Details")
38+
.Form(form =>
39+
{
40+
form.FormData(Model);
41+
form.Items(itm =>
42+
{
43+
itm.Add().Field(f => f.FirstName);
44+
itm.Add().Field(f => f.LastName);
45+
itm.Add().Field(f => f.DateOfBirth);
46+
});
47+
});
48+
s.Add().Content("Final Step");
49+
})
50+
)
51+
```
52+
53+
## Initialization as a `<div>` Element
54+
55+
When the {{ site.product }} Wizard is initialized as a `<div>` element any forms initialized via the Wizard configuration option will behave as regular forms. If the Wizard contains multiple forms as part of its steps content and the requirement is to submit them separately a Submit button must be defined via the Form `ButtonsTemplate` configuration option. It is advisable to handle the Form submit event and submit the form data via Ajax as otherwise the page will reload and the Wizard will return in its initial state.
56+
57+
```Razor
58+
@(Html.Kendo().Wizard()
59+
.Name("wizard")
60+
.Tag("div")
61+
.ValidateForms(true)
62+
.Steps(s=> {
63+
s.Add().Content("Initial Step");
64+
s.Add<UserViewModel>()
65+
.Title("User Details")
66+
.Form(form =>
67+
{
68+
form.FormData(Model);
69+
form.Items(itm =>
70+
{
71+
itm.Add().Field(f => f.UserName);
72+
itm.Add().Field(f => f.Email);
73+
itm.Add().Field(f => f.Password);
74+
});
75+
form.ButtonsTemplate("<input type=\"submit\" />");
76+
form.Events(ev => ev.Submit("onSubmit"));
77+
});
78+
s.Add<UserViewModel>()
79+
.Title("Personal Details")
80+
.Form(form =>
81+
{
82+
form.FormData(Model);
83+
form.Items(itm =>
84+
{
85+
itm.Add().Field(f => f.FirstName);
86+
itm.Add().Field(f => f.LastName);
87+
itm.Add().Field(f => f.DateOfBirth);
88+
});
89+
form.ButtonsTemplate("<input type=\"submit\" />");
90+
form.Events(ev => ev.Submit("onSubmit"));
91+
});
92+
s.Add().Content("Final Step");
93+
})
94+
)
95+
96+
<script>
97+
function onSubmit(event){
98+
event.preventDefault();
99+
//handle data submission
100+
}
101+
</script>
102+
```
103+
104+
## See Also
105+
106+
* [Basic Usage of the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/index)
107+
* [Using the API of the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/api)
108+
* [Configure the Content of the Wizard HtmlHelper for {{ site.framework }} ]({% slug htmlhelpers_wizard_aspnetcore_content %})

‎docs-aspnet/html-helpers/navigation/wizard/layout.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Layout
3+
page_title: Layout
4+
description: "Get started with the Telerik UI Wizard HtmlHelper for {{ site.framework }} and learn how to customize its appearance."
5+
slug: htmlhelpers_wizard_aspnetcore_layout
6+
position: 4
7+
---
8+
9+
# Layout
10+
11+
The {{ site.product }} Wizard supports configuration of its layout.
12+
13+
By default the {{ site.product }} Wizard is rendered with a Stepper in a horizontal orientation above the content of the Wizard. The layout could be configured via the `ContentPosition` configuration option. The available options allow you to display a vertical Stepper on the left or right side of the Wizard step content.
14+
15+
The following example demonstrates how to initialize a Wizard with a vertical Stepper and content rendered on the right side of the Stepper.
16+
17+
```Razor
18+
@(Html.Kendo().Wizard()
19+
.Name("wizard")
20+
.ContentPosition(WizardContentPosition.Right)
21+
.Steps(s=> {
22+
s.Add<UserViewModel>()
23+
.Title("User Details")
24+
.Form(form =>
25+
{
26+
form.FormData(Model);
27+
form.Items(itm =>
28+
{
29+
itm.Add().Field(f => f.UserName);
30+
itm.Add().Field(f => f.Email);
31+
itm.Add().Field(f => f.Password);
32+
});
33+
});
34+
s.Add<UserViewModel>()
35+
.Title("Personal Details")
36+
.Form(form =>
37+
{
38+
form.FormData(Model);
39+
form.Items(itm =>
40+
{
41+
itm.Add().Field(f => f.FirstName);
42+
itm.Add().Field(f => f.LastName);
43+
itm.Add().Field(f => f.DateOfBirth);
44+
});
45+
});
46+
})
47+
)
48+
```
49+
50+
## See Also
51+
52+
* [Basic Usage of the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/index)
53+
* [Using the API of the Wizard HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/wizard/api)

0 commit comments

Comments
 (0)