TabStrip - Website Navigation

Support Center

Browse Telerik support resources

Webinars

watch the video

Moving to the Client – Using jQuery and OData

Always on the hunt for the latest and the greatest in the .NET world? Watch Telerik Solutions Consultant Carl Bergenhem as he shows how your ASP.NET AJAX applications can benefit from the power of modern technologies. In this webinar he binds the sample application built in the first one to eBay’s OData feed and shows how the application can take advantage of jQuery for client-side interactions.

Read the script from the Q&A session in a blog post

watch the video

Advanced Techniques – Performance, Theming, Cloud Deployment

This master class will take your development skills to the next level. It could teach even the best .NET Ninja a thing or two about performance optimization techniques, as well as about beautifying your application with HTML5 and CSS3. This webinar will end the series with Telerik Solutions Consultant Carl Bergenhem deploying the sample application to the cloud.

Read the script from the Q&A session in a blog post

Documentation

Online Help

Or, download CHM / MS Help2 / MS Help3

Step-by-step Tutorial

Detailed courseware covering all controls in real application scenarios. Includes many samples and ready-to-use Visual Studio projects

RadEditor End-User Manual

In PDF format, getting started manual for end users

Knowledge Base

Useful articles that answers common questions and provide working examples

Code Library

Community resource hosting sample projects submitted by Telerik Staff and community members

Your Feedback

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

One of the most common scenarios, in which the tabstrip is used, is navigating through pages using tha tabstrip control. However, due to the page redirect performed by clicking on a tab, the tabstrip state is lost and the current tab loses its selected state.

This example shows how to overcome this limitation using the RadTabStrip.FindTabByUrl method in conjunction with RadTab.SelectParents.

For the purpose of this demo all tabs have one and the same NavigateUrl with different query string, but in real world scenarios where the RadTabStrip is placed on a MasterPage and used for navigation the same approach could be applied as well.

Please review the code for more details. 

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.Functionality.WebsiteNavigation.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/TabStrip/Examples/Functionality/Website-Navigation/UserControls/SupportCenter.ascx" TagPrefix="uc1" TagName="SupportCenter" %>
<%@ Register Src="~/TabStrip/Examples/Functionality/Website-Navigation/UserControls/Documentation.ascx" TagPrefix="uc1" TagName="Documentation" %>
<%@ Register Src="~/TabStrip/Examples/Functionality/Website-Navigation/UserControls/Webinars.ascx" TagPrefix="uc1" TagName="Webinars" %>
<%@ Register Src="~/TabStrip/Examples/Functionality/Website-Navigation/UserControls/ContactUs.ascx" TagPrefix="uc1" TagName="ContactUs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
    <div class="demo-container size-wide no-bg">
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server"  Skin="Black" MultiPageID="RadMultiPage1" 
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Support Center" NavigateUrl="defaultcs.aspx" runat="server" Selected="True">
                </telerik:RadTab>
                <telerik:RadTab Text="Webinars" NavigateUrl="defaultcs.aspx?page=webinars" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="Documentation" NavigateUrl="defaultcs.aspx?page=documentation" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="Contact us" NavigateUrl="defaultcs.aspx?page=contactus" runat="server">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1"  SelectedIndex="0">
            <telerik:RadPageView runat="server" ID="RadPageView1" CssClass="pageView1 pageView">
                <uc1:SupportCenter runat="server" ID="SupportCenter" />
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" CssClass="pageView2 pageView">
                <uc1:Webinars runat="server" ID="Webinars" />
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server" CssClass="pageView3 pageView">
                <uc1:Documentation runat="server" ID="Documentation" />
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView4" runat="server" CssClass="pageView4 pageView">
                <uc1:ContactUs runat="server" ID="ContactUs" />
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?