Skip to content

Commit 9382829

Browse files
donchoMilkovMdonchoMilkovM
authored
Radstepper docs (#412)
* docs(stepper): Stepper documentation Initial commit * docs(stepper): add info about SelectOnFocus fix slug * docs(stepper): fix formatting
1 parent e622217 commit 9382829

29 files changed

+939
-0
lines changed

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,9 @@ navigation:
425425
"controls/spreadsheet":
426426
title: "Spreadsheet"
427427
position: 1
428+
"controls/stepper":
429+
title: "Stepper"
430+
position: 1
428431
"controls/stylesheetmanager":
429432
title: "StyleSheet Manager"
430433
position: 1
@@ -2030,6 +2033,7 @@ intro_columns:
20302033
"SearchBox": "searchbox/overview"
20312034
"SiteMap": "sitemap/overview"
20322035
"SplitButton": "splitbutton/overview"
2036+
"Stepper": "stepper/overview"
20332037
"Switch": "switch/overview"
20342038
"Tab Strip": "tabstrip/overview"
20352039
"Timeline": "timeline/overview"

‎controls/stepper/accessibility-and-internationalization/keyboard-support.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Keyboard Support
3+
page_title: Keyboard Support - RadStepper
4+
description: Check our Web Forms article about Keyboard Support.
5+
slug: stepper/accessibility-and-internationalization/keyboard-support
6+
tags: keyboard,support
7+
published: True
8+
position: 1
9+
---
10+
11+
# Keyboard Support
12+
13+
The keyboard navigation of the RadStepper is always available.
14+
15+
>caption Keyboard legend
16+
17+
| SHORTCUT | DESCRIPTION |
18+
|-------------|----------------------------------------------------|
19+
| Up Arrow | Focuses the previous step in a vertical Stepper. |
20+
| Down Arrow | Focuses the next step in a vertical Stepper. |
21+
| Left Arrow | Focuses the previous step in a horizontal Stepper. |
22+
| Right Arrow | Focuses the next step in a horizontal Stepper. |
23+
| Home | Focuses the first step of the Stepper. |
24+
| End | Focuses the last step of the Stepper. |
25+
| Enter | Activates the currently focused step. |
26+
| Space | Activates the currently focused step. |
27+
| Tab | Moves the focus away from the Stepper. |
28+
29+
>caption Focus
30+
31+
With the `AccessKey` property of the Control you can set the desired key for quick navigation to the Stepper.
32+
33+
````ASP.NET
34+
<telerik:RadStepper runat="server" ID="RadStepper1" AccessKey="W">
35+
````
36+
37+
As result Alt + W focuses the Stepper.
38+
39+
>caption SelectOnFocus
40+
41+
RadStepper exposes the `SelectOnFocus` property, applicable for scenarios when keyboard is used for navigation.
42+
43+
The boolean value set to the property indicates whether the selection will change upon focus change or it will require additional action (Enter or Space bar key press) in order to select the focused step. By default SelectOnFocus is set to false.
44+
45+
````ASPX
46+
<telerik:RadStepper runat="server" SelectOnFocus="true">
47+
````
48+
49+
50+
Test the keyboard support of RadStepper in our [live demos](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx)
51+
52+
53+
# See Also
54+
55+
* [RadStepper Overview demo](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx)
56+
57+
58+

‎controls/stepper/accessibility-and-internationalization/right-to-left-support.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Right-to-left Support
3+
page_title: Right-to-left Support - Stepper
4+
description: Check our Web Forms article about Right-to-left Support.
5+
slug: stepper/accessibility-and-internationalization/right-to-left-support
6+
tags: right-to-left,support
7+
published: True
8+
position: 0
9+
---
10+
11+
# Right-to-left Support
12+
13+
The RadStepper supports right-to-left (RTL) language locales. In order to turn on the RTL support, you should set the *dir="rtl"* and add the *"k-rtl"* class to the parent element of the Control. The *"k-rtl"* class is needed to ensure the proper orientation of the Icons.
14+
15+
For example you can wrap the Stepper in a &lt;div dir="rtl" class="k-rtl"&gt; element:
16+
17+
![Right to Left support](../images/stepper-accessibility-rtl.png)
18+
19+
````ASP.NET
20+
<div dir="rtl" class="k-rtl">
21+
<telerik:RadStepper runat="server" ID="RadStepper1" Skin="Silk" RenderMode="Lightweight" Width="750" ShowIndicator="true">
22+
<Steps>
23+
<telerik:StepperStep Label="Personal Info" Icon="user" />
24+
<telerik:StepperStep Label="Education" Error="true" Icon="dictionary-add" />
25+
<telerik:StepperStep Label="Experience" Icon="flip-vertical" Selected="true" />
26+
<telerik:StepperStep Label="Attachments" Icon="attachment" SuccessIcon="success" />
27+
<telerik:StepperStep Label="Review" Icon="preview" Enabled="true" />
28+
<telerik:StepperStep Label="Submit" Icon="file-add" />
29+
</Steps>
30+
</telerik:RadStepper>
31+
</div>
32+
````
33+
34+
35+
# See Also
36+
37+
* [Right-to-Left Support demo](https://demos.telerik.com/aspnet-ajax/stepper/accessibility-and-internationalization/rtl/defaultcs.aspx)
38+
39+

‎controls/stepper/accessibility-and-internationalization/wai-aria-support.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: WAI-ARIA Support
3+
page_title: WAI-ARIA Support - RadStepper
4+
description: Check our Web Forms article about WAI-ARIA Support.
5+
slug: stepper/accessibility-and-internationalization/wai-aria-support
6+
tags: wai-aria,support
7+
published: True
8+
position: 3
9+
---
10+
11+
# WAI-ARIA Support
12+
13+
**RadStepper** follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role.
14+
15+
The Stepper uses the *aria-current="true"* attribute to mark the current **StepperStep** and the *aria-disabled* property to mark the disabled state of each step.
16+
17+
>note An issue with the use of WAI-ARIA in HTML documents is that they don’t validate. When you run a HTML document containing ARIA attributes through the W3C Validator it shows errors in the results for any ARIA attributes. The DOCTYPE declarations do not include any information about the WAI ARIA attributes and you cannot have a valid document which includes elements, attributes, and attribute values, not detailed in its DTD’s.
18+
>
19+
20+
21+
# See Also
22+
23+
* [WAI-ARIA basic information](https://www.w3.org/WAI/intro/aria)
24+
25+

‎controls/stepper/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: WCAG 2.1 and Section 508 Accessibility Compliance
3+
page_title: WCAG 2.1 and Section 508 Accessibility Compliance - RadStepper
4+
description: Check our Web Forms article about WCAG 2.1 and Section 508 Accessibility Compliance.
5+
slug: stepper/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance
6+
tags: wcag,2.1,and,section,508,accessibility,compliance
7+
published: True
8+
position: 3
9+
---
10+
11+
# WCAG 2.1 and Section 508 Accessibility Compliance
12+
13+
## XHTML 1.1
14+
15+
**RadStepper** is fully compliant with the XHTML 1.1 requirement.
16+
17+
## Compliance Level
18+
19+
1. Telerik RadStepper is Level **AA** compliant (in conformance with the **W3C Web Accessibility Guidelines 2.1**).
20+
21+
1. Telerik RadStepper satisfies the requirements of **"Section 508"** for software accessibility. As a result, the component can be used in US Federal Institutions and other organizations, which require software to be accessible to people with disabilities.
22+
23+
## Section 508
24+
25+
The USA federal mandate requires that information technology be made accessible to people with disabilities. Much of Section 508 compliance concerns making Web sites, intranets, and web-enabled applications accessible. Section 508 compliance has since become a major prerequisite not only in government related software, but also in most enterprise and corporate software solutions.
26+
27+
## W3C Web Content Accessibility Guidelines 2.1
28+
29+
The main goal of these guidelines is to encourage developers in creating applications providing accessible contents. Moreover, adhering to these guidelines will also make web content more accessible to all kind of users, using different devices and interfaces: desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.
30+
31+
In accordance with these guidelines W3C defines three levels of conformance developers may implement in order to provide some level of content compliance to their products:
32+
33+
* **Conformance Level "A"**
34+
35+
* **Conformance Level "Double-A"**
36+
37+
* **Conformance Level "Triple-A"**
38+
39+
For more details on W3C "Web Content Accessibility Guidelines 2.1" see [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
40+
41+
In our attempt to make our products compliant, each web-control we develop and its QSF strive to obtain at least one of conformance levels listed above.
42+
43+
**RadStepper** also has full support for keyboard navigation.
44+
45+
46+
# See Also
47+
48+
* [Keyboard Support]({%slug stepper/accessibility-and-internationalization/keyboard-support%})
49+
50+
51+

‎controls/stepper/client-side-programming/events.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: Events
3+
page_title: Client-side Events - RadStepper
4+
description: Check our the client-side events of RadStepper - OnInitialize, OnLoad, OnSelect, OnActivate
5+
slug: stepper/client-side-programming/events
6+
tags: events
7+
published: True
8+
position: 1
9+
---
10+
11+
# Events
12+
13+
This article lists the client-side events of the **RadStepper** and how to use them.
14+
15+
All events follow the MS AJAX client events convention and receive two arguments:
16+
17+
1. `sender` - the [RadStepper]({%slug stepper/client-side-programming/overview%}) instance that raised the event.
18+
1. `event arguments` - event-specific data provided to the developer.
19+
20+
RadStepper is a wrapper over the Kendo UI Stepper widget and so it exposes the [client events](https://docs.telerik.com/kendo-ui/api/javascript/ui/stepper#events) and data it does. You can find a list below.
21+
22+
>note The event data is wrapped according to the MS AJAX conventions and the fields you can see in the underlying Kendo Widget are available through a method like `get_<fieldName>()` in the `event arguments` argument of the handler (that is, the second argument the event handler receives). To cancel a cancelable event, you must call its `args.set_cancel(true);` method.
23+
24+
The exceptions are the OnInitialize and OnLoad events that are specific to the MS AJAX framework.
25+
26+
>caption Listing 1: The client-side events exposed by RadStepper
27+
28+
* **OnInitialize** — Fired just before the RadStepper client-side object is initialized.
29+
30+
* **OnLoad** — Fired when RadStepper is initialized and loaded on the page.
31+
32+
* [OnSelect](https://docs.telerik.com/kendo-ui/api/javascript/ui/stepper/events/select) — Fires when the user clicks on a Step to select it. (Cancelable event)
33+
34+
* [OnActivate](https://docs.telerik.com/kendo-ui/api/javascript/ui/stepper/events/activate) — Fires when a new Step has been selected upon user interaction.
35+
36+
37+
## Examples
38+
39+
>caption Example 1: Store a reference to the client-side object through the OnLoad event
40+
41+
````ASP.NET
42+
<script>
43+
var stepper, kendoStepper;
44+
function OnLoad(sender, args) {
45+
stepper = sender; //the RadStepper
46+
kendoStepper = sender.get_kendoWidget(); //the underlying Kendo Stepper widget
47+
}
48+
</script>
49+
<telerik:RadStepper runat="server" ID="RadStepper1">
50+
<ClientEvents OnLoad="OnLoad" />
51+
</telerik:RadStepper>
52+
````
53+
54+
>caption Example 2: Get the data associated with the activated Step
55+
56+
````ASP.NET
57+
<script>
58+
function onActivate(sender, args) {
59+
//kendo object of the activated step
60+
var step = args.get_step()
61+
//client side object of the step properties
62+
var stepProperties = step.options;
63+
64+
//access the desired step options
65+
var labelText = stepProperties.label;
66+
var iconName = stepProperties.icon;
67+
var successIconName = stepProperties.successIcon;
68+
var enabled = stepProperties.enabled;
69+
var error = stepProperties.error;
70+
}
71+
</script>
72+
<telerik:RadStepper runat="server" ID="RadStepper1">
73+
<ClientEvents OnActivate="onActivate" />
74+
<Steps>
75+
<telerik:StepperStep Label ="Step 1"/>
76+
<telerik:StepperStep Label ="Step 2"/>
77+
<telerik:StepperStep Label ="Step 3"/>
78+
</Steps>
79+
</telerik:RadStepper>
80+
````
81+
82+
# See Also
83+
84+
* [RadStepper Client-side Object]({%slug stepper/client-side-programming/overview%})
85+
86+

‎controls/stepper/client-side-programming/overview.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Overview
3+
page_title: Client-side Programming Overview - RadStepper
4+
description: Check our Web Forms article about RadStepper object.
5+
slug: stepper/client-side-programming/overview
6+
tags: stepper,object
7+
published: True
8+
position: 0
9+
---
10+
11+
# Overview
12+
13+
This article lists the client-side API of **RadStepper** and shows how to use it.
14+
15+
To use the API, you must first [get a reference to the control's client-side object]({%slug general-information/get-client-side-reference%}). For example:
16+
17+
````JavaScript
18+
var stepper = $find("<%=RadStepper1.ClientID %>");
19+
````
20+
21+
RadStepper is a server-side wrapper over the Kendo UI Stepper Widget. Thus, it exposes [the API of the underlying Kendo widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/stepper). To get a reference to the Kendo widget instance, you can do either of the following:
22+
23+
* Use the `get_kendoWidget()` method of the MS AJAX wrapper:
24+
25+
**JavaScript**
26+
27+
var stepperObject = $find("<%=RadStepper1.ClientID %>"); //the standard script control object
28+
var kendoStepper = stepperObject.get_kendoWidget(); //the Kendo widget
29+
30+
31+
* Get the Kendo Widget in its usual way. Make sure to use the `$telerik.$` jQuery reference:
32+
33+
**JavaScript**
34+
35+
var kendoStepper = $telerik.$("#<%=RadStepper1.ClientID %>").data("kendoStepper");
36+
37+
38+
In addition to using the Kendo methods directly, you can also use their wrappers that follow the MS AJAX convention through the RadStepper client object.
39+
40+
>caption Table1: Client-side methods exposed by the MS AJAX RadStepper object
41+
42+
| Name | PARAMETERS | RETURN TYPE | DESCRIPTION |
43+
|--------------|------|--------|---------------------------------------------------------------------------|
44+
| next | | | Selects the step which is immediately after the currently selected step. |
45+
| previous | | | Selects the step which is immediately before the currently selected step. |
46+
| get_selected | | object | Gets the currently selected Step |
47+
| get_steps | | array | Gets array of all Steps |
48+
49+
50+
51+
# See Also
52+
53+
* [RadStepper Client-side Events]({%slug stepper/client-side-programming/events%})
54+
* [Kendo UI Stepper widget API](https://docs.telerik.com/kendo-ui/api/javascript/ui/stepper)
55+
56+

0 commit comments

Comments
 (0)