Why will this dynamic UC, Client Tab Not work? in UI for ASP.NET AJAX TabStrip

Officialboss

43 posts

Member since:
Jan 2008

Posted 06 Jun 2008 Link to this post

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>

Officialboss

43 posts

Member since:
Jan 2008

Posted 09 Jun 2008 Link to this post

Any help would be greatly appreciated. Thx

Officialboss

43 posts

Member since:
Jan 2008

Posted 09 Jun 2008 Link to this post

Thanks for the demo, it works as expected.
However, I am still getting a JScript error when I click the buttons again to load the Tabs. My JS code is supposed to detect the Tab is already created and bring focus to it. You will notice the error when you go to Tab 2 and press the Click buttons to load the Tab and then press the same button again.

Thanks.

Officialboss

43 posts

Member since:
Jan 2008

Posted 09 Jun 2008 Link to this post

Please disregard my last message.

I found the error which was in my code, I had a line which was calling a loading panel which was not there.

Your solution is what I was looking for.

Thanks! :-)

Why will this dynamic UC, Client Tab Not work?

Officialboss

Officialboss

Helen

Officialboss

Officialboss