Tab Strip

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadTabStrip - Telerik's ASP.NET TabStrip

  • Main Course
  • Desserts
  • Soups
  • Seafood
image

Beef Stewed in a Salty Herb Crust

  • 800 gr beef bonfile
  • 2 tablespoons olive oil
  • 1 tabslespoon butter
  • salt and pepper

For the crust:

  • 120 gr cooking salt
  • 200 gr sea salt
  • 500 gr butter
  • 2 egg whites
  • 250 ml water
  • 2 tablespoons of rosmarin and salvia
image

Lavender Ice Cream

  • 250 ml cream 35%
  • 1 can of condensed milk
  • 1 can of sweetened condensed milk
  • 1 vanilla bean
  • 1 tablespoon lavender flowers
image

Creamy Soup with Port Wine and Cheese

  • 2 tablespoons butter
  • 1 onion
  • 450 gr carrots
  • 500 ml vegetable stock
  • 100 gr. Feta cheese
  • 3 tablespoons Port wine
  • 2 tablespoons fresh dill
image

Clam, Spinach and Peanut Stew

  • 1 onion
  • 30 ml olive oil
  • 500 gr white clams
  • 100 gr raw peanuts
  • 2 small tomatoes
  • 100 gr spinach
  • 200 gr. rice
  • salt and pepper
image

Greek Moussaka

  • 1 kg eggplant
  • 500 gr minced meat
  • 100 ml olive oil
  • 1 onion
  • 100 ml dry white wine
  • 600 gr tomatoes
  • 1 cinnammon stick
  • 0.5 parsley bunch
  • salt and pepper
image

Chocolate Cheesecake with Bombardino

  • 150 gr cocoa biscuits
  • 80 gr butter
  • 0.5 teaspoon cinnammon
  • 800 gr cream cheese
  • 150 gr sugar
  • 100 gr dark chocolate
  • 100 gr milk chocolate
  • 1 teaspoon vanilla extract
  • 3 eggs
  • 100 ml Bombardino liquer

The images and recipies have been adjusted for the purpose of this demo. The originals belong to kulinarno-joana.com.

tlrk.it/15BhuJ8 To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/15BhuJ8

About RadTabStrip for ASP.NET AJAX

Organize the content of your site or app efficiently with the help of Telerik’s ASP.NET Tab control. You can achieve slick-looking tab bars through the countless configuration options : create vertical, hierarchical or overlapping tabs, insert images, add templates and much more. Thanks to its semantic rendering technology RadTabstrip produces considerably small amount of HTML, which guarantees proper performance behavior when having lots of page views.

RadTabStrip and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

About This Demo

This example shows you how to:

  • Implement nested RadTabs with associated RadMultiPage controls
  • Manage the Vertical and Horizontal orientation of RadTabStrip
  • Use an Image in RadTabStrip and set its hovered and selected states

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular TabStrip demo, you can use the following path to find it in the sample website application:
tabstrip/examples/overview

Key Features

  • Tabbed navigation
  • Data binding to various data sources
  • Built-in integration with RadMultiPage
  • Drag-and-drop to reorder tabs support
  • Orientation and alignment options
  • Scrolling and multi-row tabs
  • Rich client-side and server-side API
  • Keyboard and RTL support

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="false"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/TabStrip/Examples/Overview/Info.ascx" TagPrefix="qsf" TagName="Info" %>
<!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>
    <title>ASP.NET TabStrip web control examples | RadTabStrip by Telerik</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <div class="exampleWrapper">
        <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Silk">
            <Tabs>
                <telerik:RadTab Text="My Cook Book" Width="200px"></telerik:RadTab>
                <telerik:RadTab Text="Newest" Width="200px"></telerik:RadTab>
                <telerik:RadTab Text="Top Recipe" Width="200px"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="outerMultiPage">
            <telerik:RadPageView runat="server" ID="RadPageView1">
                <telerik:RadTabStrip runat="server" ID="RadTabStrip2" MultiPageID="RadMultiPage2"
                    Orientation="VerticalLeft" Skin="Silk" Width="50px" Height="355px" SelectedIndex="0">
                    <Tabs>
                         <telerik:RadTab ImageUrl="Images/icon_AllRecipes.png" ToolTip="Main Course" SelectedImageUrl="Images/icon_AllRecipes_hover.png" HoveredImageUrl="Images/icon_AllRecipes_hover.png" Height="40px"></telerik:RadTab>
                        <telerik:RadTab ImageUrl="Images/icon_Desserts.png" ToolTip="Desserts" SelectedImageUrl="Images/icon_Desserts_hover.png" HoveredImageUrl="Images/icon_Desserts_hover.png" Height="40px"></telerik:RadTab>
                        <telerik:RadTab ImageUrl="Images/icon_Soups.png" ToolTip="Soups" SelectedImageUrl="Images/icon_Soups_hover.png" HoveredImageUrl="Images/icon_Soups_hover.png" Height="40px"></telerik:RadTab>
                        <telerik:RadTab ImageUrl="Images/icon_Seafood.png" ToolTip="Seafood" SelectedImageUrl="Images/icon_Seafood_hover.png" HoveredImageUrl="Images/icon_Seafood_hover.png" Height="40px"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage2" SelectedIndex="0" CssClass="innerMultiPage">
                    <telerik:RadPageView runat="server" ID="PageView1">
                        <div class="recipeImage qsf-ib">
                            <img src="Images/Beef_Stewed.png" alt="image" />
                        </div>
                        <div class="ingredients qsf-ib">
                            <p>Beef Stewed in a Salty Herb Crust</p>
                            <ul>
                                <li>800 gr beef bonfile</li>
                                <li>2 tablespoons olive oil</li>
                                <li>1 tabslespoon butter</li>
                                <li>salt and pepper</li>
                            </ul>
                            <p class="subtitle">For the crust:</p>
                            <ul>
                                <li>120 gr cooking salt </li>
                                <li>200 gr sea salt</li>
                                <li>500 gr butter</li>
                                <li>2 egg whites</li>
                                <li>250 ml water</li>
                                <li>2 tablespoons of rosmarin and salvia</li>
                            </ul>
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="PageView2">
                        <div class="recipeImage qsf-ib">
                            <img src="Images/Lavender_Ice_Cream.png" alt="image" />
                        </div>
                        <div class="ingredients qsf-ib">
                            <p>Lavender Ice Cream</p>
                            <ul>
                                <li>250 ml cream 35%</li>
                                <li>1 can of condensed milk</li>
                                <li>1 can of sweetened condensed milk</li>
                                <li>1 vanilla bean</li>
                                <li>1 tablespoon lavender flowers</li>
                            </ul>
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="PageView3">
                        <div class="recipeImage qsf-ib">
                            <img src="Images/Creamy_Soup.png" alt="image" />
                        </div>
                        <div class="ingredients qsf-ib">
                            <p>Creamy Soup with Port Wine and Cheese</p>
                            <ul>
                                <li>2 tablespoons butter </li>
                                <li>1 onion</li>
                                <li>450 gr carrots</li>
                                <li>500 ml vegetable stock</li>
                                <li>100 gr. Feta cheese</li>
                                <li>3 tablespoons Port wine </li>
                                <li>2 tablespoons fresh dill</li>
                            </ul>
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="PageView4">
                        <div class="recipeImage qsf-ib">
                            <img src="Images/Clam_Spinach_and_Peanut_Stew.png" alt="image" />
                        </div>
                        <div class="ingredients qsf-ib">
                            <p>Clam, Spinach and Peanut Stew</p>
                            <ul>
                                <li>1 onion</li>
                                <li>30 ml olive oil</li>
                                <li>500 gr white clams</li>
                                <li>100 gr raw peanuts</li>
                                <li>2 small tomatoes</li>
                                <li>100 gr spinach</li>
                                <li>200 gr. rice</li>
                                <li>salt and pepper</li>
                            </ul>
                        </div>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView2">
                <div class="recipeImage qsf-ib">
                    <img src="Images/Greek_Moussaka.png" alt="image" />
                </div>
                <div class="ingredients qsf-ib">
                    <p>Greek Moussaka </p>
                    <ul>
                        <li>1 kg eggplant</li>
                        <li>500 gr minced meat</li>
                        <li>100 ml olive oil</li>
                        <li>1 onion</li>
                        <li>100 ml dry white wine</li>
                        <li>600 gr tomatoes</li>
                        <li>1 cinnammon stick</li>
                        <li>0.5 parsley bunch</li>
                        <li>salt and pepper</li>
                    </ul>
                </div>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView3">
                <div class="recipeImage qsf-ib">
                    <img src="Images/Chocolate_Cheesecake.png" alt="image" />
                </div>
                <div class="ingredients qsf-ib">
                    <telerik:RadRating ID="RadRating" Skin="Silk" Value="5" runat="server"></telerik:RadRating>
                    <p>Chocolate Cheesecake with Bombardino </p>
                    <ul>
                        <li>150 gr cocoa biscuits </li>
                        <li>80 gr butter</li>
                        <li>0.5 teaspoon cinnammon </li>
                        <li>800 gr cream cheese</li>
                        <li>150 gr sugar</li>
                        <li>100 gr dark chocolate</li>
                        <li>100 gr milk chocolate</li>
                        <li>1 teaspoon vanilla extract</li>
                        <li>3 eggs</li>
                        <li>100 ml Bombardino liquer</li>
                    </ul>
                </div>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <div class="disclaimer">
            <p>
                The images and recipies have been adjusted for the purpose of this demo.
                The originals belong to <b>kulinarno-joana.com</b>.
            </p>
        </div>
    </div>
    <div style="clear:both;"></div>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/TabStrip.png" AlternateText="tlrk.it/15BhuJ8" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/15BhuJ8">tlrk.it/15BhuJ8</a>
    </div>
    <div class="qsf-ib">
    </div>
    </form>
</body>
</html>