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.
  • DefaultCS.aspx
  • FlightCS.ascx
    • FlightCS.ascx
    • PassengersCS.ascx
    • PaymentCS.ascx
    • SearchCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • FlightCS.ascx.cs
    • PassengersCS.ascx.cs
    • PaymentCS.ascx.cs
    • SearchCS.ascx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.ApplicationScenarios.Wizard.DefaultCS"Language="c#"  %>
<%@ 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