RadTabStrip for ASP.NET
Table of Contents
Use Telerik RadTabStrip as a web site navigation tool Send comments on this topic.
See Also
Example scenarios > Use Telerik RadTabStrip as a web site navigation tool

Glossary Item Box

Goal: learn how to create a tabstrip and use it as a navigation element for your web application.

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

  1. Create your tabstrip in design-time.
  2. Set the tabstrip to direct to a given URL.
  3. Set the tabstrip to persist its state while the destination page is rendered on the client.

 

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

 

An example of Telerik RadTabStrip working from within a Master Page can be found in the live examples at www.telerik.com.


Create a tabstrip in design time

1. Create a Master Page

Add a new Master Page to your project and call it Navigation.master.

2. Create a tabstrip

  1. Drag an instance of Telerik RadTabStrip from the Toolbox to Navigation.master.
    Place the tabstrip in the header of the Master Page.
  2. Right-click the tabstrip and select Build RadTabStrip.
    In the RadTabStrip Builder dialog box, add five root tabs: Home, Products, Support, Forum, and Contact. Click OK.
    The code of the control should look like this:

 

  Copy Code
<rad:RadTabStrip id="RadTabStrip1" runat="server">
<Tabs>
     <rad:Tab Text="Home"></rad:Tab>
     <rad:Tab Text="Products"></rad:Tab>
     <rad:Tab Text="Support"></rad:Tab>
     <rad:Tab Text="Forum"></rad:Tab>
     <rad:Tab Text="Contact"></rad:Tab>
</Tabs>
</rad:RadTabStrip>




Create the pages for your project and set the tabs to navigate to the pages

  1. Add five content pages to Navigation.master:
    • Default.aspx - this will be the home page;
    • Products.aspx;
    • Support.aspx;
    • Forum.aspx;
    • Contact.aspx.
  2. Add some sample content to the pages.
    For the purpose of this example, you may simply set the Title property of the pages to their respective titles.

     

  3. In the RadTabStrip Builder dialog box, set the NavigateURL property of each tab to the respective page.
    Set the NavigateURL property
    The result should look like this: 
  Copy Code
<rad:RadTabStrip id="RadTabStrip1" runat="server">
       <Tabs>
               <rad:Tab NavigateURL="Default.aspx" Text="Home"></rad:Tab>
               <rad:Tab NavigateURL="Products.aspx" Text="Products"></rad:Tab>
               <rad:Tab NavigateURL="Support.aspx" Text="Support"></rad:Tab>
               <rad:Tab NavigateURL="Forum.aspx" Text="Forum"></rad:Tab>
               <rad:Tab NavigateURL="Contact.aspx" Text="Contact"></rad:Tab>
       </Tabs>
</rad:RadTabStrip>

Milestone

If you build your web application and look at the results, you will notice the following:
  • On the plus side, you have a tabstrip on each of the five pages. Clicking on a tab takes you to the appropriate page.
  • On the minus side, the tabstrip does not persist its state and the current tab is not selected.

Set the tabstrip to persist its state while the destination page is rendered on the client.

The problem is handled using the RadTabStrip.FindTabByUrl() method in conjunction with SelectParents method of a Tab.

To solve the problem, you should manually instruct the control to update its state on each page load.  To do so, put the following snippet inside the Page_Load method of Navigation.master:

C# Copy Code
private void Page_Load(object sender, System.EventArgs e)
{
   // Find if the tabstrip contains a tab that points to this page
   Tab tab = RadTabStrip1.FindTabByUrl(Request.Url.PathAndQuery);
   if (tab != null)
   {
       // Recursively select the tab, along with its parent tabs.
        tab.SelectParents();
   }
}

 

When using declarative data sources, such as SiteMap, the control is not built at the beginning of the page lifecycle. At the Page_Load stage, the tabstrip is still not databound and therefore contains no tabs. To make the tabstrip persist its state in such a scenario, subscribe to the DataBound event exposed by RadTabStrip and move the above code there. 

See Also