Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Dynamically Loaded Usercontrols and Javascript

3 Answers 383 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Thad
Top achievements
Rank 2
Thad asked on 28 Oct 2010, 02:28 PM
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);" />

3 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 02 Nov 2010, 12:53 PM
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
0
Thad
Top achievements
Rank 2
answered on 02 Nov 2010, 02:55 PM
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>
0
Thad
Top achievements
Rank 2
answered on 02 Nov 2010, 10:29 PM
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
Tags
Ajax
Asked by
Thad
Top achievements
Rank 2
Answers by
Veli
Telerik team
Thad
Top achievements
Rank 2
Share this question
or