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

RadWizard in RadWindow

Fill one minute survey


Survey results:

RadWizard can be easily used inside other container controls like RadWindow.

In case when the Width of the control is 100% and RadWizard is dynamically resized when its parent container is resized.

  • 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 size-thin">
        <h3>Fill one minute survey</h3>
        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Start the survey" AutoPostBack="false" OnClientClicked="demo.clientClicked">
        </telerik:RadButton>
        <br />
        <h3 class="resultHeader">Survey results:</h3>
        <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" runat="server" Width="300px" Height="200px"></telerik:RadListBox>
    </div>
    <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1" Modal="true" Height="400px" VisibleTitlebar="false" VisibleStatusbar="false" Width="800px" CssClass="wizard-window">
        <ContentTemplate>
            <telerik:RadWizard RenderMode="Lightweight" runat="server" ID="RadWizard1" Height="380px" OnClientButtonClicked="demo.clientButtonClicked">
                <WizardSteps>
                    <telerik:RadWizardStep ID="RadWizardStep1" Title="First Impression" StepType="Start">
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox1" ToolTip="Q1" Label="Do you like RadWizard control?"
                            LabelWidth="430px" Width="700px">
                        </telerik:RadTextBox>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox2" ToolTip="Q2" Label="Do you expect any other functionality by RadWizard control?"
                            LabelWidth="430px" Width="700px">
                        </telerik:RadTextBox>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox3" ToolTip="Q3" Label="Do you find RadWizard control a user friendly control?"
                            LabelWidth="430px" Width="700px">
                        </telerik:RadTextBox>
                    </telerik:RadWizardStep>
                    <telerik:RadWizardStep ID="RadWizardStep2" Title="Good Points">
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox13" ToolTip="Q4" Label="Share a good point." LabelWidth="200px" Width="600px"></telerik:RadTextBox>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox14" ToolTip="Q5" Label="Share a good point." LabelWidth="200px" Width="600px"></telerik:RadTextBox>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox15" ToolTip="Q6" Label="Share a good point." LabelWidth="200px" Width="600px"></telerik:RadTextBox>
                    </telerik:RadWizardStep>
                    <telerik:RadWizardStep ID="RadWizardStep7" Title="Bad Points" StepType="Finish">
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox16" ToolTip="Q7" Label="Share a bad point." LabelWidth="200px" Width="600px"></telerik:RadTextBox>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox17" ToolTip="Q8" Label="Share a bad point." LabelWidth="200px" Width="600px"></telerik:RadTextBox>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox18" ToolTip="Q9" Label="Share a bad point." LabelWidth="200px" Width="600px"></telerik:RadTextBox>
                        <br />
                        <asp:Label runat="server" CssClass="finishNote" Text="Press Finish to close RadWindow"></asp:Label>
                    </telerik:RadWizardStep>
                </WizardSteps>
            </telerik:RadWizard>
        </ContentTemplate>
    </telerik:RadWindow>

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

Support & Learning Resources

Find Assistance