Wizard - Orientation

Demo Configurator

  • Navigation Bar PositionTop
  • Progress Bar PositionTop
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo shows how you can achieve horizontal or vertical orientation of RadWizard control. The Navigation and Progress bar can be either horizontally or vertically oriented. The NavigationBarPosition and ProgressBarPosition properties control the position of these components. By combining the values of those two properties you can configure different orientations:

  • Horizontal - the position of navigation and progress bar can be set either to Top or Bottom. Note that the supported combination of values are : Top and Top, Top and Bottom, Bottom and Top, or Bottom and Bottom.
  • Vertical - the position of navigation and progress bar can be set either to Right or Left. Note that the supported combination of values are : Right and Right, Right and Left, Left and Right, or Left and Left.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Wizard_Functionality_Orientation_DefaultCS" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadWizard1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-medium">
        <telerik:RadWizard RenderMode="Lightweight" ID="RadWizard1" runat="server" Height="350px">
            <WizardSteps>
                <telerik:RadWizardStep Title="Log in" CssClass="loginStep">
                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserNameTextBox" Text="User name:"></asp:Label>
                    <telerik:RadTextBox RenderMode="Lightweight" ID="UserNameTextBox" runat="server" ></telerik:RadTextBox>
                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="PasswordTextBox" Text="Password:"></asp:Label>
                    <telerik:RadTextBox RenderMode="Lightweight" ID="PasswordTextBox" runat="server" ></telerik:RadTextBox>
                </telerik:RadWizardStep>
                <telerik:RadWizardStep Title="Attach Database">
                    <label>Please select a data base file:</label>
                    <telerik:RadAsyncUpload RenderMode="Lightweight" ID="DataBaseUpload" runat="server"  AllowedFileExtensions=".mdf"></telerik:RadAsyncUpload>
                </telerik:RadWizardStep>
                <telerik:RadWizardStep Title="Approximately Load">
                    <label>Number of visiting users:</label>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="UsersNumber" runat="server"  Width="300px">
                        <Items>
                            <telerik:RadComboBoxItem Text="50-100 Users" Value="50" />
                            <telerik:RadComboBoxItem Text="500-1000 Users" Value="500" />
                            <telerik:RadComboBoxItem Text="Above 2000" Value="2000" />
                        </Items>
                    </telerik:RadComboBox>
                </telerik:RadWizardStep>
            </WizardSteps>
        </telerik:RadWizard>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:DropDownList ID="NavigationBarPosition" runat="server" AutoPostBack="true" Label="Navigation Bar Position"
                            OnSelectedIndexChanged="NavigationBarPosition_SelectedIndexChanged">
                            <Items>
                                <telerik:DropDownListItem Text="Top" Value="Top" />
                                <telerik:DropDownListItem Text="Right" Value="Right" />
                                <telerik:DropDownListItem Text="Bottom" Value="Bottom" />
                                <telerik:DropDownListItem Text="Left" Value="Left" />
                            </Items>
                        </qsf:DropDownList>
                    </li>
                    <li>
                        <qsf:DropDownList ID="ProgressBarPosition" runat="server" AutoPostBack="true" Label="Progress Bar Position">
                            <Items>
                                <telerik:DropDownListItem Text="Top" Value="Top" />
                                <telerik:DropDownListItem Text="Bottom" Value="Bottom" />
                            </Items>
                        </qsf:DropDownList>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?