Goal: learn how to build a wizard with Telerik RadTabStrip

Telerik RadTabStrip is suitable for creating wizard-like interfaces.

The presense of validators in multiple pageviews will not allow you to advance to the next step, even though the validators are hidden. To avoid this issue, Telerik RadMultiPage exposes the RenderSelectedPageOnly property, which works in conjunction with the tabstrip set to postback on every tab click.

This tutorial explores a simple scenario: you need to create a wizard-like web user interface. The user will be able to advance through the wizard by clicking a button; backward navigation will be achieved by clicking the tabs. The user will not be allowed to advance without submitting required information.

To achieve the goal, this tutorial will walk you through the following steps:

1. Preparatory step: create a tabstrip and a multipage, and then add content to the page views.
2. Add validators to check for user input.
3. Add a [Next] button to the page. Enable navigation through the button.
4. Enable the wizard-like behavior of the tabstrip: set up the step-by-step navigation programatically.

This tutorial assumes that you:

• are using Visual Studio 2005
• have set up a project called ExampleCS
• have added the RadControls folder to the ExampleCS root
• have removed from the Visual Studio Toolbox previous versions (if any) of Telerik RadTabStrip and Telerik RadMultiPage
• have added Telerik RadTabStrip to the Visual Studio Toolbox

A similar example can be found in the live examples at www.telerik.com.

Preparation: Create the tabstrip and a multipage 

1. Add the tabstrip and the multipage to the web form

1. Add a new web form to the ExampleCS project and call it RegistrationWizard.aspx.
2. In design time, drag Telerik RadTabStrip from the Toolbox to the RegistrationWizard.aspx web form.
3. Likewise, drag Telerik RadMultiPage to the web form.
4. Likewise, drag four instances of the PageView control inside the multipage.

2. Build the tabstrip and link it to the multipage

1. Right-click the tabstrip and select Build RadTabStrip.
   In the RadTabStrip Builder dialog box, add three root tabs: Account Info, Address, Subscription, and Registration. Click OK.
2. Set the SelectedIndex property of the tabstrip and the multipage to 0. (The default value is -1. If you leave the default value, none of the tabs will appear selected when rendered on the page.)
3. In the RadTabStrip Builder dialog box, set the Enabled property of the second, third, and fourth tabs to False. Thus you ensure that only the first tab will be initially accessible. Later we will switch this property from the code behind.
   
4. In the Properties grid for the multipage, check the value of the ID property. (Should be RadMultiPage1 - this name will be referred to below.)
   In the Properties grid for the tabstrip, set the MultiPageID property of the tabstrip to the ID of the multipage.
5. In the RadTabStrip Builder dialog box, set the PageViewID property of each tab to the respective multipage.
   The code of the control should look like this:

Copy Code

<rad:RadTabStrip AutoPostBack="true" id="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1">    <Tabs>        <rad:Tab PageViewID="PageView0" Text="Account Info"></rad:Tab>        <rad:Tab PageViewID="PageView1" Enabled="False" Text="Address"></rad:Tab>        <rad:Tab PageViewID="PageView2" Enabled="False" Text="Subscription"></rad:Tab>        <rad:Tab PageViewID="PageView3" Enabled="False" Text="Registration"></rad:Tab>    </Tabs> </rad:RadTabStrip> <rad:RadMultiPage id="RadMultiPage1" RenderSelectedPageOnly="true"  SelectedIndex="0" Runat="server">    <rad:PageView id="PageView0" Runat="server">PageView</rad:PageView>    <rad:PageView id="PageView1" Runat="server">PageView</rad:PageView>    <rad:PageView id="PageView2" Runat="server">PageView</rad:PageView>    <rad:PageView id="PageView3" Runat="server">PageView</rad:PageView> </rad:RadMultiPage>

3. Add content into the page views

Add labels and text boxes to each page view.

Below is an example of the first page:

Copy Code

<rad:PageView ID="Page0" Runat="server">    <!-- first panel: Personal -->    <div class="inputs">        <span class="label">Title:</span>        <asp:DropDownList ID="listTitle" Runat="server">            <asp:ListItem>Mr.</asp:ListItem>            <asp:ListItem>Mrs.</asp:ListItem>            <asp:ListItem>Miss</asp:ListItem>            <asp:ListItem>Ms.</asp:ListItem>        </asp:DropDownList>        <br/>        <span class="label">First Name:</span>        <asp:TextBox ID="textFirstName" Runat="server"></asp:TextBox>        <br/>        <span class="label">Second Name:</span>        <asp:TextBox ID="textSecondName" Runat="server"></asp:TextBox>        <br/>        <span class="label">E-mail:</span>        <asp:TextBox ID="textEmail" Runat="server"></asp:TextBox>    </div> </rad:PageView>

Add validators to the page

Copy Code

<span>First Name:</span> <asp:TextBox ID="textFirstName" Runat="server"></asp:TextBox> <asp:RequiredFieldValidator    Runat="server"    ErrorMessage="First Name is required"    ID="validatorFirstName"    Display="Dynamic"    ControlToValidate="textFirstName">        * </asp:RequiredFieldValidator>    ... <span>E-mail:</span> <asp:TextBox ID="textEmail" Runat="server"></asp:TextBox> <asp:RegularExpressionValidator    Runat="server"    ErrorMessage="Invalid E-mail Address"    ID="validatorRegEmail"    Display="Dynamic"    ControlToValidate="textEmail"    ValidationExpression=".+@.+/.[a-z">.+@.+\.[a-z]+"        * </asp:RegularExpressionValidator>    ... <asp:ValidationSummary    ID="valSummary"    Runat="server"    DisplayMode="BulletList"> </asp:ValidationSummary>

Milestone

Add navigation buttons and ensure the step-by-step navigation

A classic wizard has at least a [Next] button to ensure step-by-step navigation. In our example, backward navigation will be provided by the tabstrip.

1. Add a generic button control to each page view:

   Copy Code

   <!-- This goes inside the first page view: --> <asp:Button id="buttonNextAccount" runat="server" Text="Next"></asp:Button> <!-- This goes inside the second page view: --> <asp:Button id="buttonNextAddress" runat="server" Text="Next"></asp:Button> <!-- This goes inside the third page view: --> <asp:Button id="buttonNextSubscr" runat="server" Text="Next"></asp:Button> <!-- This goes inside the last page view: --> <asp:Button id="buttonSubmit" runat="server" Text="Submit"></asp:Button>

2. The following code is then added to enable and select the next tab:

   C#

   Copy Code

   private void buttonNextAccount_Click(object sender, System.EventArgs e) {    // This code enables and selects the next tab.    // Note that you have to change the SelectedIndex property of the multipage too.    RadTabStrip1.SelectedIndex = RadTabStrip1.SelectedIndex + 1;    RadTabStrip1.SelectedTab.Enabled = true;    RadMultiPage1.SelectedIndex = RadMultiPage1.SelectedIndex + 1; } private void buttonNextAddress_Click(object sender, System.EventArgs e) {    RadTabStrip1.SelectedIndex = RadTabStrip1.SelectedIndex + 1;    RadTabStrip1.SelectedTab.Enabled = true;    RadMultiPage1.SelectedIndex = RadMultiPage1.SelectedIndex + 1; } private void buttonNextSubscr_Click(object sender, System.EventArgs e) {    RadTabStrip1.SelectedIndex = RadTabStrip1.SelectedIndex + 1;    RadTabStrip1.SelectedTab.Enabled = true;    RadMultiPage1.SelectedIndex = RadMultiPage1.SelectedIndex + 1; } private void buttonSubmit_Click(object sender, System.EventArgs e) { }

See Also

© 2002-2008 Telerik. All Rights Reserved.