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

WebForms TabStrip Overview

My Cook Book
Newest
Top Recipe

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

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

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

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

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

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.

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

Scan the QR code to test the behavior of our controls on mobile devices.

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

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 120+ 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.

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

More about RadTabStrip for ASP.NET AJAX

<%@ Page AutoEventWireup="true"  %>
 
<%@ 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" 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 no-bg">
        <telerik:RadTabStrip RenderMode="Lightweight" 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 RenderMode="Lightweight" 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.png" HoveredImageUrl="images/icon_AllRecipes.png" Height="40px"></telerik:RadTab>
                        <telerik:RadTab ImageUrl="images/icon_Desserts.png" ToolTip="Desserts" SelectedImageUrl="images/icon_Desserts.png" HoveredImageUrl="images/icon_Desserts.png" Height="40px"></telerik:RadTab>
                        <telerik:RadTab ImageUrl="images/icon_Soups.png" ToolTip="Soups" SelectedImageUrl="images/icon_Soups.png" HoveredImageUrl="images/icon_Soups.png" Height="40px"></telerik:RadTab>
                        <telerik:RadTab ImageUrl="images/icon_Seafood.png" ToolTip="Seafood" SelectedImageUrl="images/icon_Seafood.png" HoveredImageUrl="images/icon_Seafood.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 RenderMode="Lightweight" 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>
 
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support