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 widget.

Stepper overview

Telerik UI for ASP.NET AJAX Ninja image

The is part of Telerik UI for ASP.NET AJAX, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Key Features

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.

  2. Use the <telerik:RadStepper> tag to declare the Stepper.

  3. Use the <Steps> inner tag to declare each StepperStep and set its properties.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadStepper runat="server" ID="RadStepper1" Skin="Silk" RenderMode="Lightweight" >
    <Steps>
        <telerik:StepperStep Label="Personal Info" Icon="user" />
        <telerik:StepperStep Label="Education" Error="true" Icon="dictionary-add" />
        <telerik:StepperStep Label="Experience" Icon="flip-vertical" />
        <telerik:StepperStep Label="Attachments" Icon="attachment" />
        <telerik:StepperStep Label="Review" Icon="preview" Enabled="false" />
        <telerik:StepperStep Label="Submit" Icon="file-add" />
    </Steps>
</telerik:RadStepper>

Skins

The RadStepper control can be styled by setting a desired built-in skin:

Figure 2:

Stepper skins

Find more information about using skins in the Controlling Visual Appearance section.

Go ahead with the Getting Started article to learn more about Stepper Control. Also, you can check out the RadStepper online demos to see it in action.

See Also

In this article