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

RadAjaxManager with UpdatePanel does not load Javascript of dynamically loaded user control

1 Answer 135 Views

General Discussions

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

mirang asked on 18 Jan 2012, 11:27 AM

I have a scenario where clicking on a control asynchronously loads other control. I have refereed the thread mentioned in "http://www.telerik.com/community/forums/aspnet-ajax/ajax/radajax-manager-does-not-load-js-files-in-dynamically-loaded-user-control.aspx". Used the application website5 provided in the link. If i add an update panel in the provided sample then the JavaScript is not getting loaded.

Code: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" enableviewstate="false">
    <div>
        <telerik:RadScriptManager runat="server" ID="ScriptManager1">
        </telerik:RadScriptManager>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%">
            <telerik:RadPane ID="LeftPane" runat="server" Width="300px" Scrolling="None" MinWidth="200"
                Height="100%">
                <asp:Button runat="server" ID="Button1" Text="Load Control 1" OnClick="Button1_Click" />
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Forward" />
            <telerik:RadPane ID="MainPane" runat="server" Scrolling="None">
                <telerik:RadSplitter runat="server" Orientation="Horizontal">
                    <telerik:RadPane ID="RadPane2" runat="server" Height="15%" MaxHeight="300">
                        <div class="qsfexHeader">
                            Search Pane
                        </div>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None">
                        <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Vertical" CssClass="SplitterResultsReading"
                            Width="100%">
                            <telerik:RadPane ID="RadPane3" runat="server" MinWidth="300" Scrolling="None">
                                <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                                    <ContentTemplate>
                                        <telerik:RadSplitter ID="RadSplitter4" runat="server" Orientation="Horizontal">
                                            <telerik:RadPane runat="server" ID="ResultViewPane" Scrolling="None">
                                                <asp:PlaceHolder runat="server" ID="PlaceHolder1"></asp:PlaceHolder>
                                            </telerik:RadPane>
                                        </telerik:RadSplitter>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="Button1" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Backward" />
                            <telerik:RadPane ID="RadPane4" runat="server" Scrolling="Both" MinWidth="300">
                                <asp:Button runat="server" ID="Button2" Text="Load Control 2" OnClick="Button2_Click" />
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>
Default.aspx.cs

using System;
using System.Configuration;
using System.Data;
using System.Linq;
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;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack && ViewState["LastLoadedControl"] != null)
        {
            string controlName = (string) ViewState["LastLoadedControl"];
            Control control = PlaceHolder1.FindControl(controlName);
            if (control != null)
            {
                PlaceHolder1.Controls.Remove(control);
            }

            control = LoadControl(string.Format("~/{0}.ascx", controlName));
            control.ID = controlName;
            PlaceHolder1.Controls.Add(control);
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Load();
     //   ViewState["LastLoadedControl"] = "WebUserControl";
    }

    private void Load()
    {
        Control control = LoadControl("~/WebUserControl.ascx");
        control.ID = "WebUserControl";
        PlaceHolder1.Controls.Clear();
        PlaceHolder1.Controls.Add(control);
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        Control control = LoadControl("~/WebUserControl.ascx");
        control.ID = "WebUserControl";
        PlaceHolder1.Controls.Clear();
        PlaceHolder1.Controls.Add(control);
    }

}

Webusercontrol.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    <script type="text/javascript">
        function pageLoad() {
            alert('Hello from user control <%=ID %>');
        }

        function sayHello()
        {
            alert('Hello again!');
            alert("<%=Button1.ClientID %>");
        }

        function Sample(sender, args) {

            alert("grid created");
        }

    </script>

</telerik:RadScriptBlock>

<asp:Label runat="server" ID="Label1"/>
<asp:Button runat="server" ID="Button1" OnClientClick="sayHello()" Text="Click ME"/>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true">
<ClientSettings EnableAlternatingItems="false" EnableRowHoverStyle="True">
                <ClientEvents OnGridCreated="Sample" />
                </ClientSettings>
</telerik:RadGrid>
<div id="panel">
</div>

On clicking of button 1 i am getting JavaScript error "Sample is undefined" .

1 Answer, 1 is accepted

answered on 19 Jan 2012, 01:48 PM

Hello mirang,

Put this JS code in to commmon js file and add refrence of this js file in to page(.aspx page).

or

directly write js code in to page(.aspx page).

Note : like

.ascx

function sayHello()
        {

        }

        function Sample(sender, args) {


        }

.aspx

function sayHello()
        {
            alert('Hello again!');
            alert("<%=Button1.ClientID %>");
        }

        function Sample(sender, args) {

            alert("grid created");
        }

Thanks,
Jayesh Goyani