New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms Wizard Overview

Minimum 4 characters, maximum 15 characters.
The password has to be at least 6 characters long.

Make sure you review our anti-spam, privacy and terms of use policies before you create an account. We take spam very seriously and have a strict permission policy you and your clients will need to abide by.

Congratulations, you have registered successfully!

This example demonstrates how you can implement a real world-like form signing scenario. You should go through the required steps in order to accomplish the registration. The main purpose of the assigned required fields is to validate the user input.

About RadWizard for ASP.NET AJAX

The Telerik RadWizard control is a Step-by-Step User Interface which takes the user through a series of steps in order to accomplish a set of tasks, for example to collect user input.

RadWizard and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Semantic rendering for minimal HTML markup
  • Rich client-side API
  • Search Engine Friendly
  • Extensive design-time support
  • Skinned Appearance
  • Built-in Validation
  • Built-in Progress bar
  • Different types of layout orientation
  • Mobile Render Mode
  • Tracking History
  • Right-to-left Support
  • Keyboard Support
  • Optimized rendered mode
  • Visual Appeal - ships with rich set of skins for easy and consistent styling

More about RadWizard for ASP.NET AJAX
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Wizard_Overview_DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <div class="wizardHeader"></div>
        <telerik:RadWizard RenderMode="Lightweight" ID="RadWizard1" runat="server"  Height="420px" OnClientLoad="OnClientLoad" OnClientButtonClicking="OnClientButtonClicking">
            <WizardSteps>
                <telerik:RadWizardStep ID="RadWizardStep1" Title="Your account" runat="server" StepType="Start" ValidationGroup="accountInfo" CausesValidation="true" SpriteCssClass="accountInfo">
                    <div class="inputWapper first">
                        <asp:Label Text="User Name: *" runat="server" AssociatedControlID="UserNameTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="UserNameTextBox" runat="server"  ValidationGroup="accountInfo" Width="320px"></telerik:RadTextBox>
                        <asp:CustomValidator ID="UserNameLenghthValidator" ValidationGroup="accountInfo" runat="server" ControlToValidate="UserNameTextBox" EnableClientScript="true" ClientValidationFunction="UserNameLenghthValidation"></asp:CustomValidator>
                        <asp:RequiredFieldValidator ID="UserNameTextBoxRequiredFieldValidator" runat="server" ControlToValidate="UserNameTextBox" EnableClientScript="true" ValidationGroup="accountInfo" ForeColor="red" ErrorMessage="required field" CssClass="validator"></asp:RequiredFieldValidator>
                        <span class="conditions">Minimum 4 characters, maximum 15 characters.</span>
                    </div>

                    <div class="inputWapper">
                        <asp:Label Text="Password: *" runat="server" AssociatedControlID="PasswordTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="PasswordTextBox" runat="server"  ValidationGroup="accountInfo" Width="320px" TextMode="Password"></telerik:RadTextBox>
                         <asp:CustomValidator ID="PasswordLengthValidatior" ValidationGroup="accountInfo" runat="server" ControlToValidate="PasswordTextBox" EnableClientScript="true" ClientValidationFunction="PasswordLenghthValidation"></asp:CustomValidator>
                        <asp:RequiredFieldValidator ID="PasswordTextBoxRequiredFieldValidator" runat="server"
                            ControlToValidate="PasswordTextBox" EnableClientScript="true" ValidationGroup="accountInfo" ErrorMessage="required field" CssClass="validator"></asp:RequiredFieldValidator>
                        <span class="conditions">The password has to be at least 6 characters long.</span>
                    </div>
                </telerik:RadWizardStep>

                <telerik:RadWizardStep Title="Personal Info" runat="server" StepType="Step" ValidationGroup="personalInfo" SpriteCssClass="personalInfo" >
                    <div class="inputWapper first">
                        <asp:Label Text="First Name: *" runat="server" AssociatedControlID="FirstNameTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="FirstNameTextBox" runat="server"  ValidationGroup="personalInfo" Width="320px"></telerik:RadTextBox>
                        <asp:RequiredFieldValidator ID="FirstNameRequiredFieldValidator" runat="server" ControlToValidate="FirstNameTextBox" EnableClientScript="true" ValidationGroup="personalInfo" ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator>
                    </div>
                    <div class="inputWapper">
                        <asp:Label Text="Last Name: *" runat="server" AssociatedControlID="LastNameTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="LastNameTextBox" runat="server"  ValidationGroup="personalInfo" Width="320px"></telerik:RadTextBox>
                        <asp:RequiredFieldValidator ID="LastNameRequiredFieldValidator" runat="server" ControlToValidate="LastNameTextBox" EnableClientScript="true" ValidationGroup="personalInfo" ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator>
                    </div>
                    <div class="inputWapper first">
                        <asp:Label Text="Place of birth:" runat="server" AssociatedControlID="PlaceOfBirthTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="PlaceOfBirthTextBox" runat="server"  Width="320px"></telerik:RadTextBox>
                    </div>
                    <div class="inputWapper date">
                        <asp:Label Text="Date of birth:" runat="server" AssociatedControlID="DateOfBirthDatePicker" />
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="DateOfBirthDatePicker" runat="server"  Width="320px"></telerik:RadDatePicker>
                    </div>
                    <div class="inputWapper first">
                        <asp:Label Text="Specify your gender:" runat="server" AssociatedControlID="GenderDropDownList" />
                        <telerik:RadDropDownList RenderMode="Lightweight" ID="GenderDropDownList" runat="server"  Width="320px">
                            <Items>
                                <telerik:DropDownListItem Text="" Value="0" />
                                <telerik:DropDownListItem Text="Male" Value="1" />
                                <telerik:DropDownListItem Text="Female" Value="2" />
                            </Items>
                        </telerik:RadDropDownList>
                    </div>
                </telerik:RadWizardStep>

                <telerik:RadWizardStep Title="Contact Details" runat="server" StepType="Step" ValidationGroup="ContactDetails" SpriteCssClass="contactDetails" >
                    <div class="inputWapper first">
                        <asp:Label Text="Street Address: *" runat="server" AssociatedControlID="StreetAddressTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="StreetAddressTextBox" runat="server"  ValidationGroup="ContactDetails" Width="320px"></telerik:RadTextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="StreetAddressTextBox" EnableClientScript="true" ValidationGroup="ContactDetails" ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator>
                    </div>
                    <div class="inputWapper">
                        <asp:Label Text="City: *" runat="server" AssociatedControlID="CityTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="CityTextBox" runat="server"  ValidationGroup="ContactDetails" Width="320px"></telerik:RadTextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="CityTextBox" EnableClientScript="true" ValidationGroup="ContactDetails" ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator>
                    </div>
                    <div class="inputWapper first">
                        <asp:Label Text="Country: *" runat="server" AssociatedControlID="CountryTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="CountryTextBox" runat="server"  ValidationGroup="ContactDetails" Width="320px"></telerik:RadTextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="CountryTextBox" EnableClientScript="true" ValidationGroup="ContactDetails" ErrorMessage="required field" CssClass="validator" ForeColor="Red"></asp:RequiredFieldValidator>
                    </div>
                    <div class="inputWapper">
                        <asp:Label Text="State:" runat="server" AssociatedControlID="StateTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="StateTextBox" runat="server"  Width="320px"></telerik:RadTextBox>
                    </div>
                    <div class="inputWapper first">
                        <asp:Label Text="Zip Code:" runat="server" AssociatedControlID="ZipCodeTextBox" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="ZipCodeTextBox" runat="server"  Width="320px"></telerik:RadTextBox>
                    </div>
                </telerik:RadWizardStep>

                <telerik:RadWizardStep StepType="Finish" Title="Confirmation" ValidationGroup="Confirmation" SpriteCssClass="confirmation" >
                    <p>Make sure you review our anti-spam, privacy and terms of use policies before you create an account. We take spam very seriously and have a strict permission policy you and your clients will need to abide by.</p>
                    <p class="anti-spam-policy">
                        <asp:CheckBox ID="AcceptTermsCheckBox" runat="server" Text="I agree to the terms of use and will abide by the anti-spam policy." CausesValidation="true" ValidationGroup="Confirmation" />
                        <asp:CustomValidator ID="AcceptTermsCheckBoxCustomValidator" runat="server"
                            EnableClientScript="true" ClientValidationFunction="AcceptTermsCheckBoxValidation" ValidationGroup="Confirmation"
                            ErrorMessage="Please agree to the anti-spam policy" Display="Dynamic"
                            CssClass="checkbox-validator" ForeColor="Red" />
                    </p>
                </telerik:RadWizardStep>

                <telerik:RadWizardStep runat="server" StepType="Complete" CssClass="complete">
                    <p>Congratulations, you have registered successfully!</p>
                    <telerik:RadButton RenderMode="Lightweight" ID="NewRegistrationButton" runat="server"  OnClick="NewRegistrationButton_Click" Text="Create a new registration"></telerik:RadButton>
                </telerik:RadWizardStep>

            </WizardSteps>
        </telerik:RadWizard>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance