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

Right-to-left Support







Values filled

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