Wizard - Right-to-left Support







Values filled
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadWizard provides support for RTL languages.

RadWizard considers the direction attribute set to the control itself or any parent HTML element. If you set the direction of the body tag (or any other parent element that contains the control) to rtl, RadWizard reverses the step order and aligns itself to the right side of the container.

 <telerik:RadWizard ID="RadWizard1" runat="server" dir="rtl" ... /> 
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true"Language="c#"  %>

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

<!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" />
    <script type="text/javascript" src="scripts.js"></script>
    <div class="demo-container">
        <telerik:RadWizard RenderMode="Lightweight" runat="server" ID="RadWizard1" Height="360px" DisplayCancelButton="true" dir="rtl" OnClientButtonClicked="demo.clientButtonClicked">
            <WizardSteps>
                <telerik:RadWizardStep ID="RadWizardStep1" Title="Name" StepType="Start">
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox1" Label="First Name" LabelWidth="105px" Width="400px">
                    </telerik:RadTextBox>
                    <br />
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox2" Label="Middle Name" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                    <br />
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox3" Label="Last Name" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                </telerik:RadWizardStep>
                <telerik:RadWizardStep ID="RadWizardStep2" Title="Address" DisplayCancelButton="false">
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox4" Label="Country" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                    <br />
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox5" Label="City" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                    <br />
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox6" Label="Address" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                </telerik:RadWizardStep>
                <telerik:RadWizardStep ID="RadWizardStep3" Title="Other" StepType="Finish">
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox7" Label="Hobby" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                    <br />
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox8" Label="Music" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                    <br />
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox9" Label="Sport" LabelWidth="105px" Width="400px"></telerik:RadTextBox>
                </telerik:RadWizardStep>
                <telerik:RadWizardStep ID="RadWizardStep4" StepType="Complete">
                    <asp:Label ID="Label1" runat="server" Text="Values filled" Font-Bold="true" />
                    <br />
                    <asp:Label ID="Label2" runat="server" />
                </telerik:RadWizardStep>
            </WizardSteps>
        </telerik:RadWizard>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?