TabStrip - Add/Remove Tabs

mailbox
Date  
FromSubjectDate
Date: 2/27/2013
 Ivo NedkovTraining courseware for ASP.NET AJAX 2/27/2013 11:05:00 PM
Date: 2/27/2013
 Vladimir MilevTracking down memory leaks in WPF and Silverlight2/27/2013 10:05:00 PM
Date: 2/27/2013
 Dimitar KapitanovThe Object Relational “Impedance Mismatch”2/27/2013 9:05:00 PM
Date: 2/26/2013
 Silverlight TeamTelerik announces the RadToolBar for Silverlight2/26/2013 9:05:00 PM
Date: 2/26/2013
 Todd AnglinSimplifying OpenAccess Scope in ASP.NET with HttpModule 2/26/2013 8:05:00 PM
Date: 2/26/2013
 Valentin StoychevSilverlight Samples source code available 2/26/2013 7:05:00 PM
Date: 2/26/2013
 Vladimir EnchevServer-side paging, sorting and filtering for your Silverlight DataGrid 2/26/2013 6:05:00 PM
Date: 2/26/2013
 Alexander FeuerRE: Telerik announces the RadToolBar for Silverlight2/26/2013 5:05:00 PM
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how to programmatically add and remove tabs and their associated pageviews on the server. The implementation uses server templates and user controls to fill the content of Tabs and the PageViews.

RadMultiPage is ajaxified by RadAjaxManager, as it updates itself and the RadTabStrip.

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"  />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    

Add tabs:

    private void AddTab(string title)
    {
        var tabTemplate = new TabTemplate();
        RadTab tab = new RadTab() { Text = title};
        tabTemplate.InstantiateIn(tab);
        RadTabStrip1.Tabs.Insert((RadTabStrip1.Tabs.Count - 1), tab);
        RadTabStrip1.DataBind();
        RadTabStrip1.SelectedIndex = tab.Index;
    }
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.ApplicationScenarios.AddRemoveTabs.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="UserControls/NewMessage.ascx" TagPrefix="uc1" TagName="NewMessage" %>
<%@ Register Src="UserControls/Message.ascx" TagPrefix="uc1" TagName="Message" %>

<!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" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function onClientTabSelecting(sender, args) {
                var tab = args.get_tab();
                if (tab.get_pageView()) {
                    tab.set_postBack(false);
                }
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecorationZoneID="demoContainer" DecoratedControls="All" ControlsToSkip="Scrollbars" Skin="Silk"/>
    <div class="demo-container no-bg" id="demoContainer">
        <div class="header">
            <img src="images/mailbox_logo.png" alt="mailbox" />
        </div>
        <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip1"  Orientation="HorizontalTop" Width="760"
            OnTabClick="RadTabStrip1_TabClick" MultiPageID="RadMultiPage1" Skin="Windows7"
            OnClientTabSelecting="onClientTabSelecting" SelectedIndex="0">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="760" Height="380" SelectedIndex="0"
            OnPageViewCreated="RadMultiPage1_PageViewCreated">
            <telerik:RadPageView ID="RadPageView1" runat="server">
                <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1"  DataSourceID="SqlDataSource1"
                    AutoGenerateColumns="false" OnItemCommand="RadGrid1_ItemCommand"
                    GridLines="None" Height="380" BorderWidth="0" AllowSorting="false" Style="outline: none"
                    Skin="Windows7" ShowGroupPanel="true">
                    <ClientSettings Scrolling-AllowScroll="True" Scrolling-UseStaticHeaders="true" AllowDragToGroup="true"
                        Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">
                    </ClientSettings>
                    <MasterTableView TableLayout="Fixed" GroupLoadMode="Client" DataKeyNames="MessageID" Width="100%"
                        AdditionalDataFieldNames="Date">
                        <GroupByExpressions>
                            <telerik:GridGroupByExpression>
                                <GroupByFields>
                                    <telerik:GridGroupByField FieldName="Received" HeaderValueSeparator=":"
                                        SortOrder="Descending" />
                                </GroupByFields>
                                <SelectFields>
                                    <telerik:GridGroupByField FieldName="Received" HeaderText="Date"
                                        FormatString="{0:d}" />
                                </SelectFields>
                            </telerik:GridGroupByExpression>
                        </GroupByExpressions>
                        <Columns>
                            <telerik:GridBoundColumn DataField="From" HeaderText="From" HeaderStyle-Width="120px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject"
                                GroupByExpression="ConversationResult Conversation GROUP BY ConversationResult">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Received" HeaderText="Date" HeaderStyle-Width="150px"
                                GroupByExpression="DateResult Date GROUP BY DateResult">
                            </telerik:GridBoundColumn>
                            <telerik:GridCalculatedColumn UniqueName="Date" DataType="System.DateTime"
                                DataFields="Received" Expression="{0}" HeaderText="Date" Visible="false">
                            </telerik:GridCalculatedColumn>
                            <telerik:GridCalculatedColumn UniqueName="Conversation" DataType="System.String"
                                DataFields="Subject" Expression='{0}.Replace("RE:","")' HeaderText="Conversation"
                                Visible="false">
                            </telerik:GridCalculatedColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="<%$ ConnectionStrings:TelerikConnectionString.ProviderName %>" CacheDuration="43200"
        SelectCommand="SELECT TOP(8) [MessageID], [From], [Subject], [Received] FROM MESSAGES ORDER BY Received DESC"></asp:SqlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?