TabStrip - Server Templates

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

This example demonstrates how to use the server templates of RadTabStrip, in order to customize each tab. This approach could be very useful when a custom scenario like closeable tabs need to be achieved.

The demo shows you how by nesting the Telerik Social Share control in each tab you can allow your users to easily share the content of each PageView on popular social networks.

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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div class="demo-container no-bg">
                <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Skin="MetroTouch" SelectedIndex="0"
                     AutoPostBack="true" OnTabClick="RadTabStrip1_TabClick" Align="Justify" >
                    <TabTemplate>
                        <table>
                            <tr>
                                <td>
                                    <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare1" runat="server" Skin="Metro" Visible="false" >
                                        <MainButtons>
                                            <telerik:RadSocialButton SocialNetType="ShareOnFacebook"></telerik:RadSocialButton>
                                            <telerik:RadSocialButton SocialNetType="ShareOnTwitter"></telerik:RadSocialButton>
                                            <telerik:RadSocialButton SocialNetType="LinkedIn"></telerik:RadSocialButton>
                                        </MainButtons>
                                    </telerik:RadSocialShare>
                                </td>
                                <td>
                                    <asp:Label runat="server" ID="lbl" CssClass="LabelClass" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label></td>
                            </tr>
                        </table>
                    </TabTemplate>
                    <Tabs>
                        <telerik:RadTab Text="Grid"></telerik:RadTab>
                        <telerik:RadTab Text="Async Upload"></telerik:RadTab>
                        <telerik:RadTab Text="TreeView"></telerik:RadTab>
                        <telerik:RadTab Text="Scheduler"></telerik:RadTab>
                        <telerik:RadTab Text="ComboBox"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="RadMultiPage1" CssClass="RadMultiPage" runat="server" SelectedIndex="0">
                    <telerik:RadPageView ID="RadPageView1" runat="server" Height="350px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/grid.aspx"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView2" runat="server" Height="350px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/asyncupload.aspx"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView3" runat="server" Height="350px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/treeview.aspx"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView5" runat="server" Height="350px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/scheduler.aspx"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView6" runat="server" Height="350px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/combobox.aspx"></telerik:RadPageView>
                </telerik:RadMultiPage>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?