diff --git a/_config.yml b/_config.yml index 7c8abf1fd1..e895e2f561 100644 --- a/_config.yml +++ b/_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" diff --git a/controls/stepper/accessibility-and-internationalization/keyboard-support.md b/controls/stepper/accessibility-and-internationalization/keyboard-support.md new file mode 100644 index 0000000000..56a22911e8 --- /dev/null +++ b/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 + +```` + +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 + +```` + + +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) + + + diff --git a/controls/stepper/accessibility-and-internationalization/right-to-left-support.md b/controls/stepper/accessibility-and-internationalization/right-to-left-support.md new file mode 100644 index 0000000000..41a4d5f37c --- /dev/null +++ b/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 +
+ + + + + + + + + + +
+```` + + +# See Also + + * [Right-to-Left Support demo](https://demos.telerik.com/aspnet-ajax/stepper/accessibility-and-internationalization/rtl/defaultcs.aspx) + + diff --git a/controls/stepper/accessibility-and-internationalization/wai-aria-support.md b/controls/stepper/accessibility-and-internationalization/wai-aria-support.md new file mode 100644 index 0000000000..03a77c1759 --- /dev/null +++ b/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) + + diff --git a/controls/stepper/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance.md b/controls/stepper/accessibility-and-internationalization/wcag-2.1-and-section-508-accessibility-compliance.md new file mode 100644 index 0000000000..99cbcc755a --- /dev/null +++ b/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%}) + + + diff --git a/controls/stepper/client-side-programming/events.md b/controls/stepper/client-side-programming/events.md new file mode 100644 index 0000000000..7b0a6fbecb --- /dev/null +++ b/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_()` 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 + + + + +```` + +>caption Example 2: Get the data associated with the activated Step + +````ASP.NET + + + + + + + + + +```` + +# See Also + + * [RadStepper Client-side Object]({%slug stepper/client-side-programming/overview%}) + + diff --git a/controls/stepper/client-side-programming/overview.md b/controls/stepper/client-side-programming/overview.md new file mode 100644 index 0000000000..ceb5ec31ac --- /dev/null +++ b/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) + + diff --git a/controls/stepper/functionality/appearance.md b/controls/stepper/functionality/appearance.md new file mode 100644 index 0000000000..007b908f0d --- /dev/null +++ b/controls/stepper/functionality/appearance.md @@ -0,0 +1,72 @@ +--- +title: Appearance +page_title: Appearance - RadStepper +description: Customize Stepper by changing its orientation and layout mode. +slug: stepper/functionality/appearance +tags: appearance +published: True +position: 2 +--- + +# Appearance + +The Stepper is rendered horizontally with an indicator element and a label for each Step. The Stepper provides the possibility to customize all of these configurations. + +## Orientation + +The orientation of the Stepper could be configured via the `Orientation` property which Indicates whether the Stepper will be rendered vertically or horizontally (default). + +````ASPX + +```` + +#### Horizontal (by default) + +![Horizontal Stepper](../images/stepper-functionality-orientation-horizontal.png) + +#### Vertical + +![Vertical Stepper](../images/stepper-functionality-orientation-vertical.png) + +Test how the `Orientation` property affects the Stepper in our [Orientation demo](https://demos.telerik.com/aspnet-ajax/stepper/orientation/defaultcs.aspx). + +## Layout + +By default both the Label and the Indicator(Icon) of each Step are displayed. The Stepper layout could be configured via the `ShowLabel` and `ShowIndicator` properties. By default both properties are enabled. + +Based on the values set to the `ShowLabel` and `ShowIndicator` properties, three major layouts can be achieved: + +#### Labels and Indicators (default) + +````ASPX + +```` + +![Labels and Indicators](../images/stepper-functionality-layout-both.png) + +#### Labels only + +````ASPX + +```` + +![Labels only](../images/stepper-functionality-layout-labels.png) + +#### Indicators only + +````ASPX + +```` + +![Indicators only](../images/stepper-functionality-layout-indicator.png) + +Check out the three options in our [Layout live demo](https://demos.telerik.com/aspnet-ajax/stepper/layout/defaultcs.aspx). + +# See Also + + * [Icons]({%slug stepper/functionality/icons%}) + * [Stepper Steps]({%slug stepper/functionality/steps%}) + * [Operation Modes]({%slug stepper/functionality/operation-modes%}) + * [Layout demo](https://demos.telerik.com/aspnet-ajax/stepper/layout/defaultcs.aspx) + + diff --git a/controls/stepper/functionality/icons.md b/controls/stepper/functionality/icons.md new file mode 100644 index 0000000000..271b9273fc --- /dev/null +++ b/controls/stepper/functionality/icons.md @@ -0,0 +1,176 @@ +--- +title: Icons +page_title: Icons - RadStepper +description: Use embedded icons in RadStepper via the icon properties - `Icon` and `SuccessIcon`. Customize the icon element further with the `ClientIconTemplate`. +slug: stepper/functionality/icons +tags: icons +published: True +position: 1 +--- + +# Icons + +The Stepper allows configuring the icons in the Steps indicator elements. All the built-in icons distributed with Telerik UI for ASP.NET AJAX suite can be used in **RadStepper**. + +In addition, all the [Kendo UI Web Font Icons](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#list-of-font-icons) are also available for using in the component. + +To include a desired embedded icon use the exposed icon properties - `Icon`, `SuccessIcon` of the **RadStepper**. The `ClientIconTemplate` exposed by **RadStepper** provides flexibility in customizing the icon. + +## Step Icon + +The icons rendered for each StepperStep. It is also clickable and can be configured through the `Icon` property of each **StepperStep**. + +By default, the Step icon is visible. To hide the icons in RadStepper set its `ShowIndicator` property to *'false'*. If no Icon is specified for a Step, the consecutive number of the Step is rendered as its icon. + +Sample usage of Icons: + +![Stepper Icons](../images/stepper-functionality-icons-basic.png) + +Below is the code producing this result: + +````ASP.NET + + + + + + + + +```` + +## Success Icon + +Defines Icons rendered in a previously completed/selected step with no error. It can be configured through the `SuccessIcon` property of a **StepperStep** element. + +When no `SuccessIcon` is specified for a Step, the icon in a completed step remains the one set to its `Icon` property. In case a Step has neither an `Icon` or `SuccessIcon` specified, a default checkmark icon is applied as SuccessIcon. + +![Stepper SuccessIcon](../images/stepper-functionality-icons-successicon.png) + +Sample declaration: + +````ASPX + + + + + + + + + + + + +```` + +## ClientIconTemplate + +**RadStepper** uses [Kendo UI Templates](https://docs.telerik.com/kendo-ui/framework/templates/overview) to provide full control over the rendering of the icon in the indicator of each step. + +The fields which can be used in the template are: + + - `label` *String* - the label set on the step + - `icon` *String* - the icon specified for this step (if any) + - `successIcon` *String* - the successIcon specified for this step (if any) + - `enabled` *Boolean* - indicates whether the step is enabled (true) or disabled (false) + - `error` *Boolean* - indicates whether the step has error (true) or not (false) + - `selected` *Boolean* - indicates whether the step is selected + - `previous` *Boolean* - indicates whether the step is before the currently selected or not + - `index` *Number* - a zero-based index of the current step + - `isFirstStep` *Boolean* - indicates whether the step is the initial one in the Stepper + - `isLastStep` *Boolean* - indicates whether the step is the last one in the Stepper + - `indicatorVisible` *Boolean* - indicates whether the indicator, which holds the icon should be displayed or not + - `labelVisible` *Boolean* - indicates whether the label section of the step should be displayed or not + +>caption Example + +![ClientIconTemplate](../images/stepper-functionality-icons-template.png) + +Markup declaration of the Stepper shown above: + +````ASPX + + + + + + #: label # + + + + + +```` + +The default appearance of a StepperStep can be achieved with the template declaration shown below. It can serve as a convenient basis for further modifications: + +````ASPX + + + #if(successIcon && previous && !error) {# + # + } + else if(icon) {# + + #} + else if(previous && !error) {# + + #} else {# + #: index + 1 # + #}# + + +```` + +With the declaration above, the Indicator element of the Step should be the same as if ClientIconTemplate is not in use. + +>caption Custom Attributes + +The StepperStep object exposes `Attributes` property that can be used for processing additional information inside the `ClientIconTemplate`. +Check out the example below to see how to use Step's custom attribute in the Template: + +![Custom Attribute in Template](../images/stepper-functionality-icons-template-attributes.png) + +````ASPX + + + + + + + #: data.attributes['my-custom-attribute'] # + + + + + + +```` + +````C# +protected void Page_Load(object sender, EventArgs e) +{ + foreach (StepperStep step in RadStepper1.Steps) + { + step.Attributes.Add("my-custom-attribute", "important"); + } +} +```` +````VB +Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) + For Each step As StepperStep In RadStepper1.Steps + step.Attributes.Add("my-custom-attribute", "important") + Next +End Sub +```` + +# See Also + + * [Icons live demo](https://demos.telerik.com/aspnet-ajax/stepper/icons/defaultcs.aspx) + * [Stepper Steps]({%slug stepper/functionality/steps%}) + * [Operation Modes]({%slug stepper/functionality/operation-modes%}) + * [Appearance]({%slug stepper/functionality/appearance%}) + + + diff --git a/controls/stepper/functionality/operation-modes.md b/controls/stepper/functionality/operation-modes.md new file mode 100644 index 0000000000..f0e558b91a --- /dev/null +++ b/controls/stepper/functionality/operation-modes.md @@ -0,0 +1,48 @@ +--- +title: Operation Modes +page_title: Operation Modes - RadStepper +description: Check our Web Forms article about Navigation. +slug: stepper/functionality/operation-modes +tags: operation-modes +published: True +position: 3 +--- + +# Operation Modes + +By setting the `Linear` property of **RadStepper** you can determine whether the Stepper will force the user to follow the Steps sequence or not. + + - When set to "true" (by default), the user is allowed to select any Step of the Stepper regardless of the current selection. + + - When set to "false", the user is allowed to select only the Steps right before or after the currently selected Step. Skipping a step is not possible in this case. + +The below example demonstrates the difference in both modes: + +![Operation modes - Linear vs Non-linear](../images/stepper-functionality-operation-modes.gif) + +Sample declaration to achieve the non-linear behavior shown above: + +````ASP.NET + + + + + + + + + +```` + +Test this functionality in our [Operation Modes live demo](https://demos.telerik.com/aspnet-ajax/stepper/operation-modes/defaultcs.aspx). + +# See Also + + * [RadStepper Operation Modes demo](https://demos.telerik.com/aspnet-ajax/stepper/operation-modes/defaultcs.aspx) + * [Stepper Steps]({%slug stepper/functionality/steps%}) + * [Icons]({%slug stepper/functionality/icons%}) + * [Appearance]({%slug stepper/functionality/appearance%}) + + + + diff --git a/controls/stepper/functionality/steps.md b/controls/stepper/functionality/steps.md new file mode 100644 index 0000000000..789b297b69 --- /dev/null +++ b/controls/stepper/functionality/steps.md @@ -0,0 +1,71 @@ +--- +title: Steps +page_title: Steps - RadStepper +description: Each Step in RadStepper consists of a label and/or an icon. A Step can be enabled, selected, set in error state. +slug: stepper/functionality/steps +tags: steps +published: True +position: 0 +--- + +# Steps + +The `StepperSteps` property and inner tag exposed by the **RadStepper** control allows you to configure each Step of the Stepper. + +You can set the label and the icon of an indicator element and define whether they would be enabled and available for selection or not. You can further set the Step that would be initially selected. Each Step can also be set in error state. + +The following example demonstrates how to set the configuration for the Steps. Each **StepperStep** can be customized by setting its various properties. + +>caption Figure 1: + +![StepperSteps types](../images/stepper-functionality-steps.png) + +The StepperStep elements can be defined declaratively in the markup in the <Steps> tag: + +````ASP.NET + + + + + + + + + + +```` + +They can also be added programmatically in the `Steps` collection of the RadStepper control: + +````C# +StepperStep step = new StepperStep(); +step.Label = "Step 3"; +step.Icon = "attachment"; +RadStepper1.Steps.Add(step); +```` +````VB +Dim step As StepperStep = New StepperStep() +step.Label = "Step 3" +step.Icon = "attachment" +RadStepper1.Steps.Add(step) +```` + +## Properties + +* `Label` - Defines the text of the Step. If set, its value is also applied as a tooltip of the Step. +* `Icon` - Defines the icon to be rendered. Gets a string value corresponding to a class from the built-in font icons. Find more related information in the [Icons]({%slug stepper/functionality/icons%}) section. +* `ClientIconTemplate` - Defines The template used to render the icon in the indicator of the Step. Find more related information in the [Icons]({%slug stepper/functionality/icons%}#clienticontemplate) section. +* `SuccessIcon` - Defines the icon to be rendered when the step has been completed/selected and it does not have an error. Find more related information in the [Icons]({%slug stepper/functionality/icons%}) section. +* `Error` *(bool)* - Defines whether the Step is in Error state (is invalid). By default all steps are valid. +* `Enabled` *(bool)* - Defines whether the Step is enabled. By default all steps are enabled. +* `Selected` *(bool)* - Defines whether the Step is selected. By default the steps are **not** selected. + + +# See Also + + * [Icons]({%slug stepper/functionality/icons%}) + * [Appearance]({%slug stepper/functionality/appearance%}) + * [Operation Modes]({%slug stepper/functionality/operation-modes%}) + * [Stepper Overview demo](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx) + + diff --git a/controls/stepper/getting-started.md b/controls/stepper/getting-started.md new file mode 100644 index 0000000000..72fdee1912 --- /dev/null +++ b/controls/stepper/getting-started.md @@ -0,0 +1,59 @@ +--- +title: Getting Started +page_title: Getting Started - RadStepper +description: Check our Web Forms article about Getting Started. +slug: stepper/getting-started +tags: getting,started, +published: True +position: 1 +--- + +# Getting Started + +The following tutorial demonstrates how you can add the RadStepper control and customize it by setting some of its properties. + +![Stepper overview](images/stepper-getting-started.png) + +1. Add a **ScriptManager** control on a Web Form. + +1. Add a **RadStepper** control to the page, and set the desired properties, like: + + * `ShowLabel` - Indicates whether the Steps in the Stepper will render their label element (the text placed below the Step indicator circle). Refer to [Appearance]({%slug stepper/functionality/appearance%}) article. + * `ShowIndicator` - Indicates whether the Steps in the Stepper will render their indicator element (the icon or number placed in a circle above the Step label). Refer to [Operation Modes]({%slug stepper/functionality/operation-modes%}) + * `Linear` - Determines whether the Stepper will force the user to follow the Steps sequence or not. Refer to [Operation Modes]({%slug stepper/functionality/operation-modes%}) + * `SelectOnFocus` - Applicable for scenarios when keyboard is used for navigation. 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. Check out [Keyboard Navigation]({%slug stepper/accessibility-and-internationalization/keyboard-support%}) + +1. Define the desired **StepperStep** instances in the <Steps> tag and set their properties: + + * `Icon` - Defines the icons rendered for each StepperStep. Refer to [Icons]({%slug stepper/functionality/icons%}) article. + * `Label` - Defines the label (text) of the Step. + * `Error` - Defines whether the Step is in error state (is invalid). By default all steps are valid. + * `SuccessIcon` - Defines the icons rendered for a previously completed/selected Step with no error. Refer to [Icons]({%slug stepper/functionality/icons%}#successicon) article. + * `Enabled` - Defines whether the Step is in error state (is invalid). By default all steps are valid. + * `Selected`- Defines whether the Step is selected. + +Here is the ASPX declaration to achieve the Stepper shown above: + +````ASP.NET + + + + + + + + + + +```` + + As a next step, you can check out the [Functionality]({%slug stepper/functionality/steps%}) of the RadStepper. + + +# See Also + * [Server-side Programming]({%slug stepper/server-side-programming/overview%}) + * [First Steps with UI for ASP.NET AJAX]({%slug introduction/installation/installing-the-telerik-controls-from-msi-file%}) + * [RadStepper online demos](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx) + + diff --git a/controls/stepper/images/stepper-accessibility-rtl.png b/controls/stepper/images/stepper-accessibility-rtl.png new file mode 100644 index 0000000000..b1bc01db8a Binary files /dev/null and b/controls/stepper/images/stepper-accessibility-rtl.png differ diff --git a/controls/stepper/images/stepper-functionality-icons-basic.png b/controls/stepper/images/stepper-functionality-icons-basic.png new file mode 100644 index 0000000000..58c512213d Binary files /dev/null and b/controls/stepper/images/stepper-functionality-icons-basic.png differ diff --git a/controls/stepper/images/stepper-functionality-icons-successicon.png b/controls/stepper/images/stepper-functionality-icons-successicon.png new file mode 100644 index 0000000000..3cb36853ed Binary files /dev/null and b/controls/stepper/images/stepper-functionality-icons-successicon.png differ diff --git a/controls/stepper/images/stepper-functionality-icons-template-attributes.png b/controls/stepper/images/stepper-functionality-icons-template-attributes.png new file mode 100644 index 0000000000..505c2dab23 Binary files /dev/null and b/controls/stepper/images/stepper-functionality-icons-template-attributes.png differ diff --git a/controls/stepper/images/stepper-functionality-icons-template.png b/controls/stepper/images/stepper-functionality-icons-template.png new file mode 100644 index 0000000000..c01083210f Binary files /dev/null and b/controls/stepper/images/stepper-functionality-icons-template.png differ diff --git a/controls/stepper/images/stepper-functionality-layout-both.png b/controls/stepper/images/stepper-functionality-layout-both.png new file mode 100644 index 0000000000..92001bac41 Binary files /dev/null and b/controls/stepper/images/stepper-functionality-layout-both.png differ diff --git a/controls/stepper/images/stepper-functionality-layout-indicator.png b/controls/stepper/images/stepper-functionality-layout-indicator.png new file mode 100644 index 0000000000..d8d943333a Binary files /dev/null and b/controls/stepper/images/stepper-functionality-layout-indicator.png differ diff --git a/controls/stepper/images/stepper-functionality-layout-labels.png b/controls/stepper/images/stepper-functionality-layout-labels.png new file mode 100644 index 0000000000..6cd570a790 Binary files /dev/null and b/controls/stepper/images/stepper-functionality-layout-labels.png differ diff --git a/controls/stepper/images/stepper-functionality-operation-modes.gif b/controls/stepper/images/stepper-functionality-operation-modes.gif new file mode 100644 index 0000000000..32b663fb6b Binary files /dev/null and b/controls/stepper/images/stepper-functionality-operation-modes.gif differ diff --git a/controls/stepper/images/stepper-functionality-orientation-horizontal.png b/controls/stepper/images/stepper-functionality-orientation-horizontal.png new file mode 100644 index 0000000000..fb413ce282 Binary files /dev/null and b/controls/stepper/images/stepper-functionality-orientation-horizontal.png differ diff --git a/controls/stepper/images/stepper-functionality-orientation-vertical.png b/controls/stepper/images/stepper-functionality-orientation-vertical.png new file mode 100644 index 0000000000..5434644c2f Binary files /dev/null and b/controls/stepper/images/stepper-functionality-orientation-vertical.png differ diff --git a/controls/stepper/images/stepper-functionality-steps.png b/controls/stepper/images/stepper-functionality-steps.png new file mode 100644 index 0000000000..f0c7e6cc70 Binary files /dev/null and b/controls/stepper/images/stepper-functionality-steps.png differ diff --git a/controls/stepper/images/stepper-getting-started.png b/controls/stepper/images/stepper-getting-started.png new file mode 100644 index 0000000000..612d039f6c Binary files /dev/null and b/controls/stepper/images/stepper-getting-started.png differ diff --git a/controls/stepper/images/stepper-overview-basicusage.png b/controls/stepper/images/stepper-overview-basicusage.png new file mode 100644 index 0000000000..c1d77cfc0b Binary files /dev/null and b/controls/stepper/images/stepper-overview-basicusage.png differ diff --git a/controls/stepper/images/stepper-skins.gif b/controls/stepper/images/stepper-skins.gif new file mode 100644 index 0000000000..0d6ef0c558 Binary files /dev/null and b/controls/stepper/images/stepper-skins.gif differ diff --git a/controls/stepper/overview.md b/controls/stepper/overview.md new file mode 100644 index 0000000000..b9e50755b3 --- /dev/null +++ b/controls/stepper/overview.md @@ -0,0 +1,77 @@ +--- +title: Overview +page_title: RadStepper Overview +description: Check our Web Forms article about Overview. +slug: stepper/overview +tags: overview +published: True +position: 0 +--- + +# RadStepper Overview + +RadStepper is an intuitive UI component that visualizes progress by displaying a sequence of logical steps. The RadStepper could also be used for navigational purposes. + +RadStepper is available as of R2 2022 and it is a server-side WebForms wrapper over the [Kendo UI Stepper for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/stepper/overview) widget. + +![Stepper overview](images/stepper-overview-basicusage.png) + +{% if site.has_cta_panels == true %} +{% include cta-panel-overview.html %} +{% endif %} + + +## Key Features + +* [Built-in Section 508 and WCAG 2.1 АА accessibility, WAI-ARIA and RTL support]({%slug stepper/accessibility-and-internationalization/keyboard-support%}) +* [Built-in Icons]({%slug stepper/functionality/icons%}) +* [Customizable appearance]({%slug stepper/functionality/appearance%}) +* [Operation Modes]({%slug stepper/functionality/operation-modes%}) +* [Support for Client IconTemplate]({%slug stepper/functionality/icons%}#clienticontemplate) +* [Flexible client-side API]({%slug stepper/client-side-programming/overview%}) +* [Visual Appeal - shipped with a rich set of skins for easy and consistent styling](#skins) + +## Add a RadStepper Control + +To add a RadStepper similar to the one shown above follow the steps: + +1. Add a **ScriptManager** control on a Web Form. + +1. Use the **<telerik:RadStepper>** tag to declare the Stepper. + +1. Use the **<Steps>** inner tag to declare each **StepperStep** and set its properties. + +````ASP.NET + + + + + + + + + + + +```` + +## Skins + +The RadStepper control can be styled by setting a desired built-in skin: + +>caption Figure 2: + +![Stepper skins](images/stepper-skins.gif) + +Find more information about using skins in the [Controlling Visual Appearance]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/controlling-visual-appearance/overview%}) section. + +Go ahead with the [Getting Started]({%slug stepper/getting-started%}) article to learn more about Stepper Control. Also, you can check out the [RadStepper online demos](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx) to see it in action. + + +# See Also + + * [Getting Started]({%slug stepper/getting-started%}) + * [RadStepper online demos](https://demos.telerik.com/aspnet-ajax/stepper/overview/defaultcs.aspx) + * [First Steps with UI for ASP.NET AJAX]({%slug introduction/installation/installing-the-telerik-controls-from-msi-file%}) + + diff --git a/controls/stepper/server-side-programming/overview.md b/controls/stepper/server-side-programming/overview.md new file mode 100644 index 0000000000..78781d52d6 --- /dev/null +++ b/controls/stepper/server-side-programming/overview.md @@ -0,0 +1,117 @@ +--- +title: Overview +page_title: Server-side Programming Overview - RadStepper +description: Check our Web Forms article about Overview. +slug: stepper/server-side-programming/overview +tags: overview +published: True +position: 0 +--- + +# Server-side Programming Overview + +You can configure the settings of RadStepper and create its Steps in the code-behind via the Server-Side API of the control. + +## RadStepper Public Properties and Methods + +For a list with the server-side properties and methods of the control, see the [Server-Side API of the RadStepper class](https://docs.telerik.com/devtools/aspnet-ajax/api/server/Telerik.Web.UI/RadStepper). You can also find it in the IntelliSense in Visual Studio. + +## Create a RadStepper in the Code-behind: + +````ASP.NET + +```` + +````C# +protected void Page_Init(object sender, EventArgs e) +{ + var stepper = new RadStepper(); + stepper.ID = "RadStepper1"; + stepper.Skin = "Silk"; + stepper.Linear = false; + stepper.Orientation = StepperOrientation.Vertical; + stepper.DataBinding += new EventHandler(RadStepper1_DataBinding); + stepper.Load += new EventHandler(RadStepper1_Load); + + PlaceHolder1.Controls.Add(stepper); +} + +protected void RadStepper1_Load(object sender, EventArgs e) +{ + if (!IsPostBack) + { + (sender as RadStepper).DataBind(); + } +} + +protected void RadStepper1_DataBinding(object sender, EventArgs e) +{ + var stepper = (sender as RadStepper); + stepper.Steps.AddRange(GetStepperSteps(null)); +} + +private IEnumerable GetStepperSteps(object dataSource) +{ + var result = new List(); + + result.Add(new StepperStep() { Label = "Home", Icon = "home", Error = true }); + result.Add(new StepperStep() { Label = "Settings", Icon = "gear", Enabled = false }); + result.Add(new StepperStep() { Label = "Attachments", Icon = "attachment", Selected = true }); + result.Add(new StepperStep() { Label = "Save", Icon = "save" }); + + return result; +} +```` +````VB +Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Init + Dim stepper = New RadStepper() + stepper.ID = "RadStepper1" + stepper.Skin = "Silk" + stepper.Linear = False + stepper.Orientation = StepperOrientation.Vertical + AddHandler stepper.Load, AddressOf RadStepper1_Load + AddHandler stepper.DataBinding, AddressOf RadStepper1_DataBinding + PlaceHolder1.Controls.Add(stepper) +End Sub + +Protected Sub RadStepper1_Load(ByVal sender As Object, ByVal e As EventArgs) + If Not IsPostBack Then + TryCast(sender, RadStepper).DataBind() + End If +End Sub + +Protected Sub RadStepper1_DataBinding(ByVal sender As Object, ByVal e As EventArgs) + Dim stepper = TryCast(sender, RadStepper) + stepper.Steps.AddRange(GetStepperSteps(Nothing)) +End Sub + +Private Function GetStepperSteps(ByVal dataSource As Object) As IEnumerable(Of StepperStep) + Dim result = New List(Of StepperStep)() + result.Add(New StepperStep() With { + .Label = "Home", + .Icon = "home", + .[Error] = True + }) + result.Add(New StepperStep() With { + .Label = "Settings", + .Icon = "gear", + .Enabled = False + }) + result.Add(New StepperStep() With { + .Label = "Attachments", + .Icon = "attachment", + .Selected = True + }) + result.Add(New StepperStep() With { + .Label = "Save", + .Icon = "save" + }) + Return result +End Function +```` + +# See Also + + * [Server-Side API of the RadStepper class](https://docs.telerik.com/devtools/aspnet-ajax/api/server/Telerik.Web.UI/RadStepper) + +