Dynamically Loaded Usercontrols and Javascript

4 posts, 0 answers
  1. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 28 Oct 2010 Link to this post

    Here's a layout of a portion of our site.  We are using Visual Studio 2010, C# 4.0, and Telerik version 2010.1.519.40

    Main.Master
     - RadScriptManager (rsmMain)
     - RadAjaxManager (ramMain)
     - RadAjaxLoadingPanel (ralpMain)
     - asp:Panel  (pnlMain, code behind sets ramMain.AjaxSettings.AddAjaxSetting(pnlUpdateMain, pnlUpdateMain, ralpMain);

    MainPage.aspx : Main.Master
     - Banner.ascx (with RadTabStrip that loads a separate usercontrol per tab using Page.LoadControl)
       - Tab1.ascx (loaded by default when page loads)
         - InnerControl1.ascx
           - RadScriptBlock with alert('inner control 1');
       - Tab2.ascx
         - InnerControlX.ascx
           - RadScriptBlock with alert('inner control X');

    When Tab1.ascx is loaded, all javascript/jquery works for that tab and it's child controls
    When we click on the second tab and load Tab2.ascx, none of the javascript has been rendered to the page.

    I've found tons of posts about this particular situation, but none have worked that allow any javascript to function inside of the usercontrols.  I've tried:
    • ScriptManager.RegisterClientScriptInclude to inject an external script file into the control
    • ScriptManager.RegisterStartupScript to inject script to run on load

    Only thing that has partially worked is placing all of the javascript needed for the dynamic controls on MainPage.aspx.  In this case, I can call functions from the OnClientClick of buttons, but jQuery can't access the controls inside of the usercontrols because of the partial page loads.

    Are there any suggestions?

    NOTE: Disabling this line of code makes everything work as expected.
      ramMain.AjaxSettings.AddAjaxSetting(pnlUpdateMain, pnlUpdateMain, ralpMain);

    Here is a demo you can use to recreate this problem.

    AjaxifiedTabDemo.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxifiedTabDemo.aspx.cs" Inherits="AjaxifiedTabDemo" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <script type="text/javascript">
            function OnTabSelecting(sender, args) {
                if (args.get_tab().get_pageViewID()) {
                    // If this tab is already loaded, stop postback
                    args.get_tab().set_postBack(false);
                }
            }    
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />
        <telerik:RadAjaxLoadingPanel ID="ralpMain" runat="server" />
        <asp:Panel ID="pnlContentMain" runat="server">
            <telerik:RadTabStrip OnClientTabSelecting="OnTabSelecting" ID="rtsDefault" AutoPostBack="true"
                SelectedIndex="0" runat="server" MultiPageID="rmpDefault"
                OnTabClick="rtsDefault_TabClick">
                <Tabs>
                    <telerik:RadTab Text="Tab 1" />
                    <telerik:RadTab Text="Tab 2" />
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="rmpDefault" runat="server" SelectedIndex="0" OnPageViewCreated="rmpDefault_PageViewCreated">
            </telerik:RadMultiPage>
        </asp:Panel>
        </form>
    </body>
    </html>

    AjaxifiedTabDemo.aspx.cs
    using System;
    using System.Web.UI;
    using Telerik.Web.UI;
     
    public partial class AjaxifiedTabDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, pnlContentMain, ralpMain);
            if (!Page.IsPostBack) AddPageView(rtsDefault.FindTabByText("Tab 1"));
        }
     
        protected void rtsDefault_TabClick(object sender, RadTabStripEventArgs e)
        {
            // Client side code will block this event if this tab has already been created.
            AddPageView(e.Tab);
            e.Tab.PageView.Selected = true;
        }
     
        protected void rmpDefault_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            string controlName = (e.PageView.ID == "Tab1") ? "Tab1Control.ascx" : "Tab2Control.ascx";
            Control tabUserControl = Page.LoadControl(controlName);
            tabUserControl.ID = e.PageView.ID + "_userControl";
            e.PageView.Controls.Add(tabUserControl);
        }
     
        private void AddPageView(RadTab tab)
        {
            RadPageView pageView = new RadPageView { ID = tab.Text.Replace(" ", "") };
            pageView.Attributes["controlLoaded"] = "0";
            rmpDefault.PageViews.Add(pageView);
            tab.PageViewID = pageView.ID;
        }
    }

    Tab1Control.ascx -- nothing in code behind but empty Page_Load()
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Tab1Control.ascx.cs" Inherits="RadControlsWebApp1.Tab1Control" %>
    <%@ Register TagPrefix="uc" TagName="InnerControl1" Src="~/InnerControl1.ascx" %>
    <uc:InnerControl1 id="ucInnerControl" runat="server"></uc:InnerControl1>
    This is Tab 1
     
    <telerik:RadScriptBlock ID="rsbTab1" runat="server">
        <script language="javascript" type="text/javascript">
            function tab1Click(sender) {
                alert('thanks for clicking a button on tab 1!  ' + sender.id);
                return false;
            }
        </script>
    </telerik:RadScriptBlock>
     
    <asp:Button ID="btnOnTab1" runat="server" Text="Button in tab 1" OnClientClick="return tab1Click(this);" />

    Tab2Control.ascx -- nothing in code behind but empty Page_Load()
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Tab2Control.ascx.cs" Inherits="RadControlsWebApp1.Tab2Control" %>
    <%@ Register TagPrefix="uc" TagName="InnerControl2" Src="~/InnerControl2.ascx" %>
    <uc:InnerControl2 id="ucInnerControl2" runat="server"></uc:InnerControl2>
    This is Tab 2
     
    <telerik:RadScriptBlock ID="rsbTab2" runat="server">
        <script language="javascript" type="text/javascript">
            function tab2Click(sender) {
                alert('thanks for clicking a button on tab 2!  ' + sender.id);
                return false;
            }
        </script>
    </telerik:RadScriptBlock>
     
    <asp:Button ID="btnOnTab2" runat="server" Text="Button in tab 2" OnClientClick="return tab2Click(this);" />

    InnerControl1.ascx -- nothing in code behind but empty Page_Load()
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InnerControl1.ascx.cs"
        Inherits="RadControlsWebApp1.InnerControl1" %>
    <telerik:RadScriptBlock ID="rsbInnerControl" runat="server">
        <script language="javascript" type="text/javascript">
            function internalClick(sender) {
                alert('thanks for clicking me!  ' + sender.id);
                return false;
            }
        </script>
    </telerik:RadScriptBlock>
    <asp:Button ID="btnInnerButton" runat="server" Text="Button in inner control 1" OnClientClick="return internalClick(this);" />

    InnerControl2.ascx -- nothing in code behind but empty Page_Load()
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InnerControl2.ascx.cs"
        Inherits="RadControlsWebApp1.InnerControl2" %>
    <telerik:RadScriptBlock ID="rsbInnerControl2" runat="server">
        <script language="javascript" type="text/javascript">
            function internalClick2(sender) {
                alert('thanks for clicking me on tab 2!  ' + sender.id);
                return false;
            }
        </script>
    </telerik:RadScriptBlock>
    <asp:Button ID="btnInnerButton" runat="server" Text="Button in inner control 2" OnClientClick="return internalClick2(this);" />
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 02 Nov 2010 Link to this post

    Hello Thad,

    You havent's specified and AJAX setting where your Panel (pnlContentMain) AJAX-ifies itself:

    Default.aspx.cs:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, pnlContentMain, ralpMain);
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(pnlContentMain, pnlContentMain, ralpMain);
        if (!Page.IsPostBack) AddPageView(rtsDefault.FindTabByText("Tab 1"));
    }

    This is required so that RadScriptBlocks can properly be registered.

    Veli
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 02 Nov 2010 Link to this post

    Doh!  You beat me to it!  I just solved this by adding these settings, which I found on your dynamic tab loading demo.  Thanks, Veli!

    Javascript is now working, but I'm still having a problem getting RadWindows on the inner user controls to open, but I'll post an update on that when I've eliminated user error.  ;-)

    Added settings to fix problem...
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rtsDefault">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rtsDefault" />
                    <telerik:AjaxUpdatedControl ControlID="rmpDefault" LoadingPanelID="ralpMain" />
                    </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rmpDefault">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rmpDefault" LoadingPanelID="ralpMain" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
  5. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 02 Nov 2010 Link to this post

    For those who may find this post...

    In our case we are using templates, which require that you add your RadWindows to the RadWindowManager.Windows[] collection.

    In order to get this work in the following scenario, you must add the RadWindows to the RadWindowManager in the OnInit method, not in the Page_Load method or the RadWindows are not rendered to the page.

    MyPage.aspx
      > RadAjaxManager
      > RadWindowManager
      > Banner.ascx (contains RadTabStrip)
          > RadAjaxMangerProxy to ajaxify the RadTabStrip and RadMultiPage
          > Tab1.ascx (loaded by RadTabStrip -> Page.LoadControl(ascx)
              > InnerControl1.ascx
                 > RadWindow
          > Tab2.ascx (loaded by RadTabStrip -> Page.LoadControl(ascx)
              > InnerControl2.ascx
                 > RadWindow

    All is working well for me now.

    -Thad
Back to Top