Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

TabStrip / Client-side API

Selecting tabs
Tab to select:
Selecting page views
PageView to select:
  • RadControls for ASP.NET
  • RadControls for WinForms
  • Telerik Reporting
  • Sitefinity CMS
  • Enterprise Services
  • Enterprise Account Manager
  • On-site Training
  • GoToMeeting Sessions
  • Corporate Info
  • Press Center
  • Customers
  • Awards

  • Change the selected Tab by clicking the Button.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TabStrip.ClientSide.ClientSideAPI.DefaultCS" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
         .pageView
         {
         border: 1px solid #777;
         }
        
         .controls *
         {
             vertical-align: middle;
         }
        
         .rfdRoundedWrapper_fieldset
         {
             width: 100%;
         }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <telerik:RadFormDecorator runat="server" DecoratedControls="All" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>
            <script type="text/javascript">
                function selectTab()
                {
                    var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                    var text = $get("<%= TextBox1.ClientID %>").value;
                    var tab = tabStrip.findTabByText(text);
                    if (!tab)
                    {
                        alert("There is no tab with text \"" + text + "\"");
                        return false;
                    }
                    
                    tab.set_selected(true); //The same as tab.select();
                    return false;
                }
                
                function selectPageView()
                {
                    var pageView = $find("<%= RadMultiPage1.ClientID %>");
                    var pageViewIndex = parseInt ($get("<%= DropDownList1.ClientID %>").value);
                    
                    pageView.get_pageViews().getPageView(pageViewIndex).set_selected(true);
                    
                    return false;
                }
            </script>

            <fieldset style="height: 80px;">
                <legend>Selecting tabs</legend>
                <div style="float: right" class="controls">
                    Tab to select:
                    <asp:TextBox runat="server" ID="TextBox1" Text="Corporate"></asp:TextBox>
    <asp:Button runat="server" ID="Button1" OnClientClick="return selectTab();"
    Text="Select" />
                </div>
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" style="float: left">
                    <Tabs>
                        <telerik:RadTab Text="Corporate">
                            <Tabs>
                                <telerik:RadTab Text="About us">
                                </telerik:RadTab>
                                <telerik:RadTab Text="Careers">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTab>
                        <telerik:RadTab Text="Services">
                            <Tabs>
                                <telerik:RadTab Text="Products">
                                </telerik:RadTab>
                                <telerik:RadTab Text="Solutions">
                                </telerik:RadTab>
                                <telerik:RadTab Text="Certifications">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTab>
                        <telerik:RadTab Text="Work">
                            <Tabs>
                                <telerik:RadTab Text="Clients">
                                </telerik:RadTab>
                                <telerik:RadTab Text="Testimonials">
                                </telerik:RadTab>
                                <telerik:RadTab Text="FAQ">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
            </fieldset>
            
            <fieldset style="margin-top: 20px">
                <legend>Selecting page views</legend>
                <div style="float: right" class="controls">
                    PageView to select:
                    <asp:DropDownList runat="server" ID="DropDownList1">
                        <asp:ListItem Text="ProductsPage" Value="0"></asp:ListItem>
                        <asp:ListItem Text="ServicesPage" Value="1" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="CorporatePage" Value="2"></asp:ListItem>
                    </asp:DropDownList>
    <asp:Button runat="server" ID="Button2" OnClientClick="return selectPageView();"
    Text="Select" />
                </div>
                    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Height="167px" Width="240px" CssClass="pageView">
                        <telerik:RadPageView runat="server" ID="ProductsPage">
                            <ul>
                                <li>RadControls for ASP.NET</li>
                                <li>RadControls for WinForms</li>
                                <li>Telerik Reporting</li>
                                <li>Sitefinity CMS</li>
                            </ul>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="ServicesPage">
                            <ul>
                                <li>Enterprise Services</li>
                                <li>Enterprise Account Manager</li>
                                <li>On-site Training</li>
                                <li>GoToMeeting Sessions</li>
                            </ul>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="CorporatePage">
                            <ul>
                                <li>Corporate Info</li>
                                <li>Press Center</li>
                                <li>Customers</li>
                                <li>Awards</li>
                            </ul>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
            </fieldset>
            <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451