This is a migrated thread and some comments may be shown as answers.

Why will this dynamic UC, Client Tab Not work?

4 Answers 146 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Officialboss asked on 06 Jun 2008, 10:02 PM

Please run this in your environment, an ASPX page loading two UserControls Dynamically. The second UserControl adds Tabs via client code. Press the Click buttons on Tab2.

Could someone tell me what is wrong and why the nested Tabs will not work?

Thanks

Content Page

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NestedTabDynamicUC.aspx.cs" Inherits="NestedTabDynamicUC_NestedTabDynamicUC" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>NestedTabDynamicUC</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                <telerik:RadAjaxManager ID="RadAjaxManagerMaster" runat="server"> 
        
                </telerik:RadAjaxManager> 
        
                <div> 
        
                <asp:Label ID="lblMessage" runat="server" /> 
        
                    <telerik:RadTabStrip Visible="true" BorderStyle="Solid" BorderColor="black" BorderWidth="0px"   
        
                    ID="RadTabStrip1" runat="server" Skin="Outlook" SelectedIndex="0" AutoPostBack="true"  
        
                    OnTabClick="RadTabStrip1_TabClick"> 
        
                    <Tabs> 
        
                        <telerik:RadTab Text="Tab 1" ID="tab0" runat="server"></telerik:RadTab> 
        
                        <telerik:RadTab Text="Tab 2" ID="tab1" runat="server"></telerik:RadTab> 
        
                    </Tabs> 
        
                </telerik:RadTabStrip> 
        
                <asp:Panel ID="pnlControls" runat="server" style="padding:5px 1px 2px 5px;" /> 
        
                </div> 
        
            <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> 
        
            <AjaxSettings> 
        
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1"> 
        
                    <UpdatedControls> 
        
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
        
                        <telerik:AjaxUpdatedControl ControlID="pnlControls" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                        <telerik:AjaxUpdatedControl ControlID="lblMessage" /> 
        
                    </UpdatedControls> 
        
                </telerik:AjaxSetting> 
        
            </AjaxSettings> 
        
            </telerik:RadAjaxManagerProxy> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30" BackColor="#E0E0E0"> 
        
                <asp:Image ID="Image1" ImageUrl="~/Images/Loading7.gif" BorderWidth="0px" AlternateText="Loading"  
        
                runat="server" Style="margin-top: 45px;" /> 
        
            </telerik:RadAjaxLoadingPanel> 
        
                </form> 
        
            </body> 
        
            </html>

Content Page Code Behind

    
            using System; 
        
            using System.Collections; 
        
            using System.Configuration; 
        
            using System.Data; 
        
            using System.Web; 
        
            using System.Web.Security; 
        
            using System.Web.UI; 
        
            using System.Web.UI.HtmlControls; 
        
            using System.Web.UI.WebControls; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            public partial class NestedTabDynamicUC_NestedTabDynamicUC : System.Web.UI.Page 
        
            { 
        
                #region Properties 
        
                private string LatestLoadedControlName 
        
                { 
        
                    get { return (string)ViewState["LatestLoadedControlName"]; } 
        
                    set { ViewState["LatestLoadedControlName"] = value; } 
        
                } 
        
                #endregion 
        
                #region Page Events 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    if (LatestLoadedControlName != null) 
        
                    { 
        
                        LoadUserControl(LatestLoadedControlName); 
        
                    } 
        
                    else 
        
                    { 
        
                        LoadUserControl("WebUserControl.ascx"); 
        
                    } 
        
                }  
        
                #endregion 
        
                #region Tabs Events 
        
                protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e) 
        
                { 
        
                    lblMessage.Text = e.Tab.Text + " " + e.Tab.SelectedIndex.ToString() + " " + e.Tab.ID; 
        
                    switch (e.Tab.ID.ToUpper()) 
        
                    { 
        
                        case "I0": 
        
                            LoadUserControl("WebUserControl.ascx"); 
        
                            break; 
        
                        case "I1": 
        
                            LoadUserControl("WebUserControl2.ascx"); 
        
                            break; 
        
                        default: 
        
                            LoadUserControl("WebUserControl.ascx"); 
        
                            break; 
        
                    } 
        
                } 
        
                private void LoadUserControl(string controlName) 
        
                { 
        
                    if (LatestLoadedControlName != null) 
        
                    { 
        
                        Control previousControl = pnlControls.FindControl(LatestLoadedControlName.Split('.')[0]); 
        
                        if (!Object.Equals(previousControl, null)) 
        
                        { 
        
                            this.pnlControls.Controls.Remove(previousControl); 
        
                        } 
        
                    } 
        
                    string userControlID = controlName.Split('.')[0]; 
        
                    Control targetControl = pnlControls.FindControl(userControlID); 
        
                    if (Object.Equals(targetControl, null)) 
        
                    { 
        
                        UserControl userControl = (UserControl)this.LoadControl(controlName); 
        
                        //slashes and tildes are forbidden 
        
                        userControl.ID = userControlID.Replace("/", "").Replace("~", ""); 
        
                        this.pnlControls.Controls.Add(userControl); 
        
                        LatestLoadedControlName = controlName; 
        
                    } 
        
                }  
        
                #endregion 
        
            }

WebUserControl.ascx

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="NestedTabDynamicUC_WebUserControl" %> 
        
            User Control 1 
        
            <br /> 
        
            <telerik:radcodeblock ID="RadCodeBlock2" runat="server"> 
        
                <%=System.DateTime.Now.ToString() %> 
        
            </telerik:radcodeblock>

WebUserControl2.ascx

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl2.ascx.cs" Inherits="NestedTabDynamicUC_WebUserControl2" %> 
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
            <script type="text/javascript"> 
        
            function addNewTab() 
        
            {     
        
                //Adds the tab to the Tabs Collection of the selected tab 
        
                var persistChanges = true; 
        
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>"); 
        
                var mymultiPage = $find('<%= RadMultiPage1.ClientID %>'); 
        
                var tabCount = tabStrip.get_tabs().get_count(); 
        
                // Check if we have already opened the Tab 
        
                for (i = 0; i< tabCount; i++) { 
        
                    var tab2 = tabStrip.get_tabs().getTab(i); 
        
                    if (tab2 != null) { 
        
                        if (tab2.get_text() == "Tab Id " + arguments[0].toString()) { 
        
                            tab2.select(); 
        
                            return false; 
        
                        } 
        
                    } 
        
                } 
        
                var selectedTab = tabStrip.get_selectedTab(); 
        
                var test = arguments[0]; 
        
                if (persistChanges) { 
        
                    tabStrip.trackChanges(); 
        
                    mymultiPage.trackChanges(); 
        
                }        
        
                var tab = new Telerik.Web.UI.RadTab(); 
        
                tabStrip.get_tabs().add(tab);    
        
                tab.set_text("Tab Id " + arguments[0].toString()); 
        
                tab.select(); 
        
                var pageView = new Telerik.Web.UI.RadPageView();     
        
                mymultiPage.get_pageViews().add(pageView); 
        
                pageView.get_element().innerHTML = "Page content here " + arguments[0].toString(); 
        
                pageView.set_selected(true);     
        
                if (persistChanges) { 
        
                    tabStrip.commitChanges(); 
        
                    mymultiPage.commitChanges();  
        
                } 
        
                return false;       
        
            } 
        
            </script> 
        
            </telerik:RadCodeBlock> 
        
            <ul> 
        
                <li>Load Tab 21&nbsp;<input type="button" value="Click" onclick="return addNewTab('1');" /></li> 
        
                <li>Load Tab 22&nbsp;<input type="button" value="Click" onclick="return addNewTab('2');" /></li> 
        
            </ul> 
        
            <hr style="width:1px;" /> 
        
            <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Skin="Outlook" Style="float:left"  
        
                        SelectedIndex="0" CssClass="tabStrip" MultiPageID="RadMultiPage1"> 
        
                        </telerik:RadTabStrip> 
        
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" CssClass="multiPage" 
        
                        BorderStyle="Solid"  
        
                        BorderWidth="1px"  
        
                        BorderColor="#999999">             
        
                        </telerik:RadMultiPage>

4 Answers, 1 is accepted

Accepted

answered on 09 Jun 2008, 04:22 PM

TabstripTest.zip

Hi Howard,

You should use RadScriptBlock instead of RadCodeBlock.

For more information please review the following help topic - http://www.telerik.com/help/aspnet-ajax/ajxradscriptblockradcodeblock.html.

Also find attached the modified code which works as expected now.

Regards,
Helen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Why will this dynamic UC, Client Tab Not work?

4 Answers, 1 is accepted