Why will this dynamic UC, Client Tab Not work?

5 posts, 1 answers
  1. Officialboss
    Officialboss avatar
    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> 
                 
     
                 

  2. Officialboss
    Officialboss avatar
    43 posts
    Member since:
    Jan 2008

    Posted 09 Jun 2008 Link to this post

    Any help would be greatly appreciated. Thx
  3. Answer
    Helen
    Admin
    Helen avatar
    1052 posts

    Posted 09 Jun 2008 Link to this post

    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
  4. Officialboss
    Officialboss avatar
    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.
  5. Officialboss
    Officialboss avatar
    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! :-)
Back to Top