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

Wizard

For showcases with similar functionality to the one in this demo you can check our specially designed for this purpose control, RadWizard , instead of integrating RadTabStrip and RadMultiPage.
  • Search
  • Flight
  • Passengers
  • Payment

RadTabStrip can be used to create wizard-like interfaces.

This example shows how to build such a wizard interface using dynamic pageviews and user controls.

Each user control contains a button that navigates to the next tab: 

private void GoToNextTab()
{
    RadTabStrip tabStrip = (RadTabStrip)this.NamingContainer.FindControl("RadTabStrip1");
    RadTab flightTab = tabStrip.FindTabByText("Flight");
    flightTab.Enabled = true;
    flightTab.Selected = true;

    RadTab passangerstTab = tabStrip.FindTabByText("Passengers");
    RadTab paymentTab = tabStrip.FindTabByText("Payment");
    passangerstTab.Enabled = paymentTab.Enabled = false;
}
Choose your destination, fill the empty fields and use the navigation buttons, in order to build and pay your flight.
  • DefaultVB.aspx
  • FlightVB.ascx
    • FlightVB.ascx
    • PassengersVB.ascx
    • PaymentVB.ascx
    • SearchVB.ascx
  • DefaultVB.aspx.vb
    • DefaultVB.aspx.vb
    • FlightVB.ascx.vb
    • PassengersVB.ascx.vb
    • PaymentVB.ascx.vb
    • SearchVB.ascx.vb
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="TabStrip.Examples.ApplicationScenarios.Wizard.DefaultVB" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" href="styles.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        For showcases with similar functionality to the one in this demo you can check our specially designed 
        for this purpose control, <a href="http://demos.telerik.com/aspnet-ajax/wizard/functionality/validation/defaultcs.aspx">RadWizard</a>
        , instead of integrating RadTabStrip and RadMultiPage.
    </qsf:MessageBox>
    <div class="demo-container no-bg">
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" Align="Justify"
            Skin="Silk" CssClass="tabStrip" CausesValidation="false">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated"
            CssClass="multiPage">
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance