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

Problem with Ajax Manager and Master pages

27 Answers 1342 Views

Ajax

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

thepilsbury asked on 31 May 2007, 03:24 PM

I'm trying to use the AjaXManager control on a content page that is linked to a master page however it will not display in the browser - I get the message "Object reference not set to an instance of an object." The interesting thing is that the same code works in a standard aspx page (ie one that is not linked to a master page).

The aspx code for the master page is:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master1.master.cs" Inherits="Master1" %> 

<%@ 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 scroll="no">  

    <form id="form1" runat="server">  

    <div> 

        <asp:ScriptManager ID="ScriptManager1" runat="server">  

        </asp:ScriptManager> 

        <telerik:RadSplitter ID="RadSplitter1" runat="server" FullScreenMode="True" Height="100%" 

            Orientation="Horizontal" Skin="Blue" Width="100%">  

            <telerik:RadPane ID="TopPane" runat="server" EnableEmbeddedSkins="False"   

                Index="0" Scrolling="None" Width="100%" Height="50px">  

            </telerik:RadPane> 

            <telerik:RadPane ID="MainPane" runat="server" EnableEmbeddedSkins="False" Height="" 

                Index="1" Scrolling="None" Width="">  

                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  

                </asp:ContentPlaceHolder> 

            </telerik:RadPane> 

            <telerik:RadPane ID="FooterPane" runat="server" Height="20px">  

            </telerik:RadPane> 

        </telerik:RadSplitter> 

    </div> 

    </form> 

</body> 

</html>

The code for the content page is:

<%@ Page Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="page linked to master1.aspx.cs" 

    Inherits="Default2" Title="Untitled Page" %> 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 

<%@ Register Assembly="RadTreeView.Net2" Namespace="Telerik.WebControls" TagPrefix="radT" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">  

    <telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%" items-capacity="4" 

        Skin="Blue" SplitBarsSize="" Width="100%">  

        <telerik:RadPane ID="NavigationPane" runat="server" EnableEmbeddedSkins="False" Height="" 

            Index="0" Width="20%">  

            <div> 

                <radT:RadTreeView ID="RadTreeView1" runat="server" AutoPostBack="true" OnNodeClick="RadTreeView1_OnNodeClick">  

                    <Nodes> 

                        <radT:RadTreeNode Text="one">  

                        </radT:RadTreeNode> 

                        <radT:RadTreeNode Text="two">  

                        </radT:RadTreeNode> 

                    </Nodes> 

                </radT:RadTreeView> 

            </div> 

        </telerik:RadPane> 

        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" EnableEmbeddedSkins="False" 

            Index="1" /> 

        <telerik:RadPane ID="ContentPane" runat="server" EnableEmbeddedSkins="False" Height="" 

            Index="2" Scrolling="None" Width="">  

            <div> 

                <div id="divTest" runat="server">  

                </div> 

            </div> 

        </telerik:RadPane> 

    </telerik:RadSplitter> 

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  

        <AjaxSettings> 

            <telerik:AjaxSetting AjaxControlID="RadTreeView1">  

                <UpdatedControls> 

                    <telerik:AjaxUpdatedControl ControlID="divTest" /> 

                </UpdatedControls> 

            </telerik:AjaxSetting> 

        </AjaxSettings> 

    </telerik:RadAjaxManager> 

</asp:Content>

The code for the page not linked to a master is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxmanager.aspx.cs" Inherits="ajaxmanager" %> 

<%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %> 

<%@ Register Assembly="RadTreeView.Net2" Namespace="Telerik.WebControls" TagPrefix="radT" %> 

<%@ 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">  

        <asp:ScriptManager ID="ScriptManager1" runat="server">  

        </asp:ScriptManager> 

    <div> 

        <telerik:radsplitter id="RadSplitter2" runat="server" height="100%" items-capacity="4" 

            skin="Blue" splitbarssize="" width="100%">  

        <telerik:RadPane ID="NavigationPane" runat="server" EnableEmbeddedSkins="False" Height="" 

            Index="0" Width="20%">  

            <div> 

                <radT:RadTreeView ID="RadTreeView1" runat="server" AutoPostBack="true" OnNodeClick="RadTreeView1_OnNodeClick">  

                    <Nodes> 

                        <radT:RadTreeNode Text="one">  

                        </radT:RadTreeNode> 

                        <radT:RadTreeNode Text="two">  

                        </radT:RadTreeNode> 

                    </Nodes> 

                </radT:RadTreeView> 

            </div> 

        </telerik:RadPane> 

        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" EnableEmbeddedSkins="False" 

            Index="1" /> 

        <telerik:RadPane ID="ContentPane" runat="server" EnableEmbeddedSkins="False" Height="" 

            Index="2" Scrolling="None" Width="">  

            <div> 

                <div id="divTest" runat="server">  

                </div> 

            </div> 

        </telerik:RadPane> 

    </telerik:radsplitter> 

    </div> 

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  

            <AjaxSettings> 

                <telerik:AjaxSetting AjaxControlID="RadTreeView1">  

                    <UpdatedControls> 

                        <telerik:AjaxUpdatedControl ControlID="divTest" /> 

                    </UpdatedControls> 

                </telerik:AjaxSetting> 

            </AjaxSettings> 

        </telerik:RadAjaxManager> 

    </form> 

</body> 

</html>

The RadTreeView1_OnNodeClick event just sets the innerHTML of the testDiv container with the node text.

All this works fine both within the master/content page and standalone page scenarios without the Ajax Manager control. As soon as this is put in I get the error message appear with the master/content page.

Your help is very much appreciated.

27 Answers, 1 is accepted

answered on 01 Jun 2007, 02:43 PM

Hello thepilsbury,

The Prometheus AjaxManager has never been intended to work from nested pages, i.e. user controls or content pages. You need to place it on the MasterPage and set the AjaxSettings relations from there:

   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="false">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ContentPlaceHolder1$RadTreeView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ContentPlaceHolder1$divTest" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

Sincerely yours,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 08 Jun 2007, 04:48 PM

I'm having same problem and applied the suggested approach which results to the following javascript popup error:

"Sys.InvalidOperationException: Could not find UPdatePanel with ID 'ctl100_ctl00_ct_PanelStep2Panel'. If it si being updated dynamically then it must be inside another UpdatePanel."

My ContentPlaceHolderID = "ct" and the RadAjaxManager in the master page looks like this:

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" EnablePageHeadUpdate="False" 
    DefaultLoadingPanelID="ct$RadAjaxLoadingPanel1"> 
    <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="ct$LinkButtonToStep2"> 
            <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="ct$PanelStep1" /> 
                <telerik:AjaxUpdatedControl ControlID="ct$PanelStep2" /> 
            </UpdatedControls> 
        </telerik:AjaxSetting> 
    </AjaxSettings> 
</telerik:RadAjaxManager> 

Looks like it appends ctl100_ once too much. When I change the ControlID to "ctl100$ct$PanelStep2" it doesn't give me the javascript error anymore but it also doesn't update the panel.

I fixed the problem! It seems that the following line was the problem:
<div style="clear: both" />
Changing it to:
<div style="clear: both"></div>
fixed the problem. Don't ask why.

answered on 07 Jan 2008, 11:34 AM

Hello rh,

Although we are doing our best to ensure that RadControls Prometheus are as backwards compatible with their Classic versions as possible, due to the ASP.NET AJAX framework conventions and syntax there can be some breaking changes between both versions:

http://www.telerik.com/products/aspnet-prometheus/faq.aspx (see sections Why isn't Prometheus part of RadControls for ASP.NET, Is it safe to use the Prometheus Beta and What are the risks of using Prometheus controls)

To facilitate the migration process as much as possible, we have created individual help article for each control outlining the main points while migrating for RadControls Classic to RadControls Prometheus. Here are links to the relevant articles for RadGrid, RadMenu and RadComboBox:

http://www.telerik.com/help/radcontrols/prometheus/?grdMigrationToPrometheus.html

http://www.telerik.com/help/radcontrols/prometheus/?menu_changes_and_backward.html

http://www.telerik.com/help/radcontrols/prometheus/?combochanges.html

If you experience a particular problem when migrating from RadAjax Classic to RadAjax Prometheus, I recommend you review these resources which compare both RadAjax frameworks in detail:

http://www.telerik.com/products/aspnet-prometheus/controls/ajax/RadAjax-aspnet-vs-RadAjax-prometheus.aspx

Also feel free to submit a sample project demonstrating the erroneous behavior (through our support ticketing system). We will debug it locally and will do everything possible to provide an accurate explanation/solution for you.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 25 Jan 2008, 01:29 PM

Just a minor sidebar to the business of a single AjaxManager.

I have a number of sites that use nested MasterPages (up to 5), and finding the AjaxManager can be a hassle.

So, I wrote myself a simple recursive FindControlOnMaster() utility, where I pass it the ID of the control I'm looking for and the current Page.Master... and it steps through the MasterPage nesting.

It's sure not rocket science, but if it's of use to anyone, you're welcome to use it, or make it better.

            public static Control FindControlOnMaster(System.Web.UI.MasterPage CurrentMaster, string ID)  
        
            {  
        
                Control _Value = null;  
        
                if (CurrentMaster.Master != null)  
        
                {  
        
                    _Value = FindControlOnMaster((System.Web.UI.MasterPage) CurrentMaster.Master, ID);  
        
                }  
        
                if (_Value == null)  
        
                {  
        
                    _Value = CurrentMaster.FindControl(ID);  
        
                }  
        
                return _Value;  
        
            }  
        
            // Call as below
        
            Telerik.Web.UI.RadAjaxManager _AjaxManager = FindControlOnMaster(this.Page.Master, "AjaxManager1") as Telerik.Web.UI.RadAjaxManager;