Radstepper docs

_config.yml

@@ -425,6 +425,9 @@ navigation:
     "controls/spreadsheet":
         title: "Spreadsheet"
         position: 1
+    "controls/stepper":
+        title: "Stepper"
+        position: 1
     "controls/stylesheetmanager":
         title: "StyleSheet Manager"
         position: 1
@@ -2030,6 +2033,7 @@ intro_columns:
       "SearchBox": "searchbox/overview"
       "SiteMap": "sitemap/overview"
       "SplitButton": "splitbutton/overview"
+      "Stepper": "stepper/overview"
       "Switch": "switch/overview"
       "Tab Strip": "tabstrip/overview"
       "Timeline": "timeline/overview"

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

@@ -0,0 +1,58 @@
+---
+title: Keyboard Support
+page_title: Keyboard Support - RadStepper
+description: Check our Web Forms article about Keyboard Support.
+slug: stepper/accessibility-and-internationalization/keyboard-support
+tags: keyboard,support
+published: True
+position: 1
+---
+
+# Keyboard Support
+
+The keyboard navigation of the RadStepper is always available.
+
+>caption Keyboard legend
+
+| SHORTCUT    | DESCRIPTION                                        |
+|-------------|----------------------------------------------------|
+| Up Arrow    | Focuses the previous step in a vertical Stepper.   |
+| Down Arrow  | Focuses the next step in a vertical Stepper.       |
+| Left Arrow  | Focuses the previous step in a horizontal Stepper. |
+| Right Arrow | Focuses the next step in a horizontal Stepper.     |
+| Home        | Focuses the first step of the Stepper.             |
+| End         | Focuses the last step of the Stepper.              |
+| Enter       | Activates the currently focused step.              |
+| Space       | Activates the currently focused step.              |
+| Tab         | Moves the focus away from the Stepper.             |
+
+>caption Focus
+
+With the `AccessKey` property of the Control you can set the desired key for quick navigation to the Stepper.
+
+````ASP.NET
+<telerik:RadStepper runat="server" ID="RadStepper1" AccessKey="W">
+````
+
+As result Alt + W focuses the Stepper.
+
+>caption SelectOnFocus
+
+RadStepper exposes the `SelectOnFocus` property, applicable for scenarios when keyboard is used for navigation. 
+
+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.
+
+````ASPX
+<telerik:RadStepper runat="server" SelectOnFocus="true">
+````
+
+
+Test the keyboard support of RadStepper in our [live demos](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx)
+
+
+# See Also
+
+ * [RadStepper Overview demo](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx)
+
+
+

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

@@ -0,0 +1,39 @@
+---
+title: Right-to-left Support
+page_title: Right-to-left Support - Stepper
+description: Check our Web Forms article about Right-to-left Support.
+slug: stepper/accessibility-and-internationalization/right-to-left-support
+tags: right-to-left,support
+published: True
+position: 0
+---
+
+# Right-to-left Support
+
+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.
+
+For example you can wrap the Stepper in a <div dir="rtl" class="k-rtl"> element:
+
+![Right to Left support](../images/stepper-accessibility-rtl.png)
+
+````ASP.NET
+<div dir="rtl" class="k-rtl">
+    <telerik:RadStepper runat="server" ID="RadStepper1" Skin="Silk" RenderMode="Lightweight" Width="750" ShowIndicator="true">
+        <Steps>
+            <telerik:StepperStep Label="Personal Info" Icon="user" />
+            <telerik:StepperStep Label="Education" Error="true" Icon="dictionary-add" />
+            <telerik:StepperStep Label="Experience" Icon="flip-vertical" Selected="true" />
+            <telerik:StepperStep Label="Attachments" Icon="attachment" SuccessIcon="success" />
+            <telerik:StepperStep Label="Review" Icon="preview" Enabled="true" />
+            <telerik:StepperStep Label="Submit" Icon="file-add" />
+        </Steps>
+    </telerik:RadStepper>
+</div>
+````
+
+
+# See Also
+
+ * [Right-to-Left Support demo](https://demos.telerik.com/aspnet-ajax/stepper/accessibility-and-internationalization/rtl/defaultcs.aspx)
+
+

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

@@ -0,0 +1,25 @@
+---
+title: WAI-ARIA Support
+page_title: WAI-ARIA Support - RadStepper
+description: Check our Web Forms article about WAI-ARIA Support.
+slug: stepper/accessibility-and-internationalization/wai-aria-support
+tags: wai-aria,support
+published: True
+position: 3
+---
+
+# WAI-ARIA Support
+
+**RadStepper** follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role.
+
+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.
+
+>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.
+>
+
+
+# See Also
+
+ * [WAI-ARIA basic information](https://www.w3.org/WAI/intro/aria)
+
+

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

@@ -0,0 +1,51 @@
+---
+title: WCAG 2.1 and Section 508 Accessibility Compliance
+page_title: WCAG 2.1 and Section 508 Accessibility Compliance - RadStepper
+description: Check our Web Forms article about WCAG 2.1 and Section 508 Accessibility Compliance.
+slug: stepper/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance
+tags: wcag,2.1,and,section,508,accessibility,compliance
+published: True
+position: 3
+---
+
+# WCAG 2.1 and Section 508 Accessibility Compliance
+
+## XHTML 1.1
+
+**RadStepper** is fully compliant with the XHTML 1.1 requirement.
+
+## Compliance Level
+
+1. Telerik RadStepper is Level **AA** compliant (in conformance with the **W3C Web Accessibility Guidelines 2.1**).
+
+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.
+
+## Section 508
+
+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.
+
+## W3C Web Content Accessibility Guidelines 2.1
+
+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.
+
+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:
+
+* **Conformance Level "A"**
+
+* **Conformance Level "Double-A"**
+
+* **Conformance Level "Triple-A"**
+
+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/)
+
+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.
+
+**RadStepper** also has full support for keyboard navigation.
+
+
+# See Also
+
+ * [Keyboard Support]({%slug stepper/accessibility-and-internationalization/keyboard-support%})
+
+
+

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

@@ -0,0 +1,86 @@
+---
+title: Events
+page_title: Client-side Events - RadStepper
+description: Check our the client-side events of RadStepper - OnInitialize, OnLoad, OnSelect, OnActivate
+slug: stepper/client-side-programming/events
+tags: events
+published: True
+position: 1
+---
+
+# Events
+
+This article lists the client-side events of the **RadStepper** and how to use them.
+
+All events follow the MS AJAX client events convention and receive two arguments:
+
+1. `sender` - the [RadStepper]({%slug stepper/client-side-programming/overview%}) instance that raised the event.
+1. `event arguments` - event-specific data provided to the developer.
+
+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.
+
+>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.
+
+The exceptions are the OnInitialize and OnLoad events that are specific to the MS AJAX framework.
+
+>caption Listing 1: The client-side events exposed by RadStepper
+
+* **OnInitialize** — Fired just before the RadStepper client-side object is initialized.
+
+* **OnLoad** — Fired when RadStepper is initialized and loaded on the page.
+
+* [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) 
+
+* [OnActivate](https://docs.telerik.com/kendo-ui/api/javascript/ui/stepper/events/activate) — Fires when a new Step has been selected upon user interaction.
+
+
+## Examples
+
+>caption Example 1: Store a reference to the client-side object through the OnLoad event
+
+````ASP.NET
+<script>
+    var stepper, kendoStepper;
+    function OnLoad(sender, args) {
+        stepper = sender; //the RadStepper
+        kendoStepper = sender.get_kendoWidget(); //the underlying Kendo Stepper widget
+    }
+</script>
+<telerik:RadStepper runat="server" ID="RadStepper1">
+    <ClientEvents OnLoad="OnLoad" />
+</telerik:RadStepper>
+````
+
+>caption Example 2: Get the data associated with the activated Step
+
+````ASP.NET
+<script>
+    function onActivate(sender, args) {
+        //kendo object of the activated step 
+        var step = args.get_step()
+        //client side object of the step properties
+        var stepProperties = step.options;
+
+        //access the desired step options
+        var labelText = stepProperties.label;
+        var iconName = stepProperties.icon;
+        var successIconName = stepProperties.successIcon;
+        var enabled = stepProperties.enabled;
+        var error = stepProperties.error;
+    }
+</script>
+<telerik:RadStepper runat="server" ID="RadStepper1">
+    <ClientEvents OnActivate="onActivate" />
+    <Steps>
+        <telerik:StepperStep Label ="Step 1"/>
+        <telerik:StepperStep Label ="Step 2"/>
+        <telerik:StepperStep Label ="Step 3"/>
+    </Steps>
+</telerik:RadStepper>
+````
+
+# See Also
+
+ * [RadStepper Client-side Object]({%slug stepper/client-side-programming/overview%})
+
+

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

@@ -0,0 +1,56 @@
+---
+title: Overview
+page_title: Client-side Programming Overview - RadStepper
+description: Check our Web Forms article about RadStepper object.
+slug: stepper/client-side-programming/overview
+tags: stepper,object
+published: True
+position: 0
+---
+
+# Overview
+
+This article lists the client-side API of **RadStepper** and shows how to use it.
+
+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:
+
+````JavaScript
+var stepper = $find("<%=RadStepper1.ClientID %>");
+````
+
+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:
+
+* Use the `get_kendoWidget()` method of the MS AJAX wrapper:
+
+    **JavaScript**
+
+        var stepperObject  = $find("<%=RadStepper1.ClientID %>"); //the standard script control object
+        var kendoStepper = stepperObject.get_kendoWidget(); //the Kendo widget
+
+
+* Get the Kendo Widget in its usual way. Make sure to use the `$telerik.$` jQuery reference:
+
+    **JavaScript**
+
+        var kendoStepper = $telerik.$("#<%=RadStepper1.ClientID %>").data("kendoStepper"); 
+
+
+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.
+
+>caption Table1: Client-side methods exposed by the MS AJAX RadStepper object
+
+| Name         | PARAMETERS | RETURN TYPE | DESCRIPTION                                                               |
+|--------------|------|--------|---------------------------------------------------------------------------|
+| next         |            |             | Selects the step which is immediately after the currently selected step.  |
+| previous     |            |             | Selects the step which is immediately before the currently selected step. |
+| get_selected |            | object      | Gets the currently selected Step                                          |
+| get_steps    |            | array       | Gets array of all Steps                                                   |
+
+
+
+# See Also
+
+ * [RadStepper Client-side Events]({%slug stepper/client-side-programming/events%})
+ * [Kendo UI Stepper widget API](https://docs.telerik.com/kendo-ui/api/javascript/ui/stepper)
+
+