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

Server Templates

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>
<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="https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/overview"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView2" runat="server" Height="350px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/asyncupload/overview"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView3" runat="server" Height="350px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/overview"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView5" runat="server" Height="350px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/scheduler/overview"></telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView6" runat="server" Height="350px" ContentUrl="https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/overview"></telerik:RadPageView>
                </telerik:RadMultiPage>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance