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 / Add/Remove/Disable Tabs

Event log:

  • With RadTabStrip it is easy to add, remove or disable tabs at the client side. What is more, you can persist the changes after postback. 

    <script type="text/javascript">
        function addTab()
        {   
            ...
            //Adds the tab to the Tabs Collection of the selected tab
            selectedTab.get_tabs().add(tab);
            tab.set_text("Child Tab " + selectedTab.get_tabs().get_count());
            ...        
        }
        
        function removeTab()
        {
            ...        
            //Removes the selected tab from the Tabs Collection of the tabstrip
            tabStrip.get_tabs().remove(selectedTab);        
            
        }
        
        function disableTab()
        {
            ...
            //Disables the selected tab
            selectedTab.set_enabled(false);
                        
        }
    </script>
    

    If you want to persist these changes after postback, the methods described below should be used:

    • tabStrip.trackChanges();  -indicates that client-side changes are going to be made and these changes are supposed to be persisted after postback.
    • tabStrip.commitChanges(); - submits the changes to the server.
    var tabStrip = $find("<%=RadTabStrip1.ClientID%>");
    tabStrip.trackChanges();
    //add, remove, disable tabs
    tabStrip.commitChanges(); 
    
    Client side changes are available on the server side after postback. You can use the ClientChanges property to access them:
    foreach (ClientOperation<RadTab> operation in RadTabStrip1.ClientChanges)
    {
    	RadTab tab = operation.Item;
    
    	switch (operation.Type)
    	{
    		case ClientOperationType.Insert:
    			break;
    		case ClientOperationType.Remove:
    			break;
    		case ClientOperationType.Update:
    			UpdateClientOperation<RadTab> update = operation as UpdateClientOperation<RadTab>;
    			break;
    		case ClientOperationType.Clear:
    			break;
    	}	
    }
    

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.AddRemoveDisable.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">
            .section
            {
                clear:both;
                overflow:auto; /*clear the floats*/
                padding: 10px;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>

            <script type="text/javascript">
            //<![CDATA[
            function addTab()
            {
                var persistChanges = $get("<%= CheckBox1.ClientID %>").checked;
                
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                var selectedTab = tabStrip.get_selectedTab();
                
                if (persistChanges)
                    tabStrip.trackChanges();
                    
                var tab = new Telerik.Web.UI.RadTab();
                selectedTab.get_tabs().add(tab);
                tab.set_text("Child Tab " + selectedTab.get_tabs().get_count());
                
                if (persistChanges)
                    tabStrip.commitChanges();
                
                return false;
            }
            
            function removeTab()
            {
                var persistChanges = $get("<%= CheckBox1.ClientID %>").checked;
                
                var tabStrip = $find("<%= RadTabStrip2.ClientID %>");
                var selectedTab = tabStrip.get_selectedTab();
                if (!selectedTab)
                {
                    alert("Please select a tab first");
                    return false;
                }
                
                if (persistChanges)
                    tabStrip.trackChanges();
                
                tabStrip.get_tabs().remove(selectedTab);
                
                if (tabStrip.get_tabs().get_count() > 0)
                    tabStrip.get_tabs().getTab(0).set_selected(true);
                
                if (persistChanges)
                    tabStrip.commitChanges();
                    
                return false;
            }
            
            function disableTab()
            {
                var persistChanges = $get("<%= CheckBox1.ClientID %>").checked;
                
                var tabStrip = $find("<%= RadTabStrip3.ClientID %>");
                var selectedTab = tabStrip.get_selectedTab();
                if (!selectedTab)
                {
                    alert("Please select a tab first");
                    return false;
                }
                
                if (persistChanges)
                    tabStrip.trackChanges();
                
                selectedTab.set_enabled(false);
                selectedTab.set_selected(false);
                    
                if (persistChanges)
                    tabStrip.commitChanges();
                    
                return false;
            }
            //]]>
            </script>

            <div class="section" style="float: right">
    <asp:CheckBox runat="server" ID="CheckBox1" Text="Persist changes after postback"
    Checked="true" />

                <asp:Button runat="server" ID="Button1" Text="Postback" CssClass="qsfButtonBigger" OnClick="Button1_Click" />
            </div>
            <div class="section">
                <div class="title">
                    Adding tabs</div>
                <div style="float: right">
    <asp:Button runat="server" ID="Button2" Text="Add child to selected tab" CssClass="qsfButtonBigger"
    OnClientClick="return addTab();" />

                </div>
                <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Style="float: left"
                    SelectedIndex="0">
                </telerik:RadTabStrip>
            </div>
            <div class="section">
                <div class="title">
                    Removing tabs</div>
                <div style="float: right">
    <asp:Button runat="server" ID="Button3" Text="Remove selected tab" CssClass="qsfButtonBigger"
    OnClientClick="return removeTab();" />

    <asp:Button runat="server" ID="Button4" Text="Reset tabstrip" CssClass="qsfButtonBigger"
    OnClick="Button3_Click" />

                </div>
                <telerik:RadTabStrip runat="server" ID="RadTabStrip2" Style="float: left"
                    SelectedIndex="0">
                </telerik:RadTabStrip>
            </div>
            <div class="section">
                <div class="title">
                    Disabling/Enabling tabs
                </div>
                <div style="float: right">
    <asp:Button runat="server" ID="Button5" Text="Disable selected tab" CssClass="qsfButtonBigger"
    OnClientClick="return disableTab();" />

    <asp:Button runat="server" ID="Button6" Text="Enable all tabs" CssClass="qsfButtonBigger"
    OnClick="Button6_Click" />

                </div>
                <telerik:RadTabStrip runat="server" ID="RadTabStrip3" Style="float: left"
                    SelectedIndex="0">
                </telerik:RadTabStrip>
            </div>
            <qsf:EventLogConsole ID="EventLogConsole1" runat="server" Style="clear: both;" />
            <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