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

[Solved] Add ajax settings on the fly...

3 Answers 329 Views

Ajax

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

luc bonenfant asked on 27 Nov 2009, 01:40 AM

Hi,
I have got many ajax settings to define and my page is heavy to render.
So I decide to add settings dynamically. The problem is i need to know ajax settings from Page_Load.
To resolve that, I added UpdatedControls in a hidden field from javascript and I start an ajaxRequest. During Page_Load on server, I retrieve UpdatedControls from hidden field and I build my ajax settings (my Initiator is RadAjaxManager1 to manage ResponseEnd).
My Page_Load set settings normaly but I always get the error :
Execution error Microsoft JScript: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'dnn_ctrxxx_tvNodesPanel'. If it is being updated dynamically then it must be inside another UpdatePanel.
All my UpdatedControls are always visible ; I don't understand because if I mention these UpdatedControls directly from HTML tags

<UpdatedControls>, it works well !

This is the parts of codes written to accomplish the mechanism :

    
            function OnClientNodeClicked(sender, args)  
        
            {  
        
                $get("<% = hdAjaxSettings.ClientID %>").value   
        
                = "tvNodes,rcmClipboard_Document_Permissions,rcmClipboard_Node_Permissions";  
        
                $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest('Node_Clicked');  
        
            }

    
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnResponseEnd="OnResponseEnd">  
        
               <AjaxSettings> 
        
                   <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
        
                       <UpdatedControls> 
        
                       </UpdatedControls> 
        
                   </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManager> 
        
            <Telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" /> 
        
            <asp:HiddenField ID="hdAjaxSettings" runat="server" />

    
                        If Not Page.IsPostBack Then 
        
                        Else 
        
                            Dim hdAjaxSettingIDs As String = hdAjaxSettings.Value  
        
                            If Not hdAjaxSettingIDs = String.Empty Then 
        
                                For Each ID As String In hdAjaxSettingIDs.Split(",")  
        
                                    Dim UpdatedControl As New AjaxUpdatedControl(ID, "LoadingPanel1")  
        
                                    RadAjaxManager1.AjaxSettings(0).UpdatedControls.Add(UpdatedControl)  
        
                                Next 
        
                            End If 
        
                        End If

Thank you for help !

3 Answers, 1 is accepted

answered on 27 Nov 2009, 06:00 PM

Finally, I don't arrive to change UpdatedControls dynamically, I tried from code behind and later from javascript, and both methods failed...
This is my code to change them from javascript, could you tell me where is the problem please ?

    
            <%@ Register TagPrefix="Telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DynAjaxVB._Default" %> 
        
            <!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></title>  
        
                <script type="text/javascript">  
        
                    function onButton1() {  
        
                        var ajaxManager = $find('RadAjaxManager1');  
        
                        if (ajaxManager != null) {  
        
                            var settings = ajaxManager.get_ajaxSettings();  
        
                            for (setting in settings) {  
        
                                var initiatingControl = settings[setting].InitControlID;  
        
                                if (initiatingControl == 'Button1') {  
        
                                    var dicts = new Array();  
        
                                    var dict = new Array();  
        
                                    dict['ControlID'] = 'Label3';  
        
                                    dict['PanelID'] = 'LoadingPanel1';  
        
                                    dicts[0] = dict;  
        
                                    settings[setting].UpdatedControls = dicts;  
        
                                }  
        
                            }  
        
                            ajaxManager.set_ajaxSettings(settings);  
        
                        }  
        
                        return true;  
        
                    }  
        
                    function OnRequestStart(sender, args) {  
        
                        //alert('start');  
        
                    }  
        
                    function OnResponseEnd(sender, args){  
        
                        //alert('end');  
        
                    }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline" ClientEvents-OnRequestStart="OnRequestStart" ClientEvents-OnResponseEnd="OnResponseEnd">  
        
                    <AjaxSettings> 
        
                        <Telerik:AjaxSetting AjaxControlID="Button1">  
        
                            <UpdatedControls > 
        
                                <Telerik:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="LoadingPanel1" /> 
        
                                <Telerik:AjaxUpdatedControl ControlID="Label2" LoadingPanelID="LoadingPanel1" /> 
        
                            </UpdatedControls> 
        
                        </Telerik:AjaxSetting> 
        
                        <Telerik:AjaxSetting AjaxControlID="Button2">  
        
                            <UpdatedControls > 
        
                                <Telerik:AjaxUpdatedControl ControlID="Label3" LoadingPanelID="LoadingPanel1" /> 
        
                            </UpdatedControls> 
        
                        </Telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <Telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" /> 
        
                    Label1:<asp:Label ID="Label1" runat="server" /><br /> 
        
                    Label2:<asp:Label ID="Label2" runat="server" /><br /> 
        
                    Label3:<asp:Label ID="Label3" runat="server" /><br /> 
        
                    <br /> 
        
                    Button1 don't change Label3 dynamically for unknown reason !<br /> 
        
                    <br /> 
        
                    <asp:Button ID="Button1" runat="server" Text="Button1 : Show Time Label1 & Label2" OnClientClick="onButton1();" /><br /> 
        
                    <asp:Button ID="Button2" runat="server" Text="Button2 : Show Time Label 3" /> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

    
            Partial Public Class _Default  
        
                Inherits System.Web.UI.Page  
        
                Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        
                    If Page.IsPostBack Then 
        
                        'RadAjaxManager1.AjaxSettings.AddAjaxSetting(Button1, Label1)  
        
                    End If 
        
                End Sub 
        
                Private Sub ChangeLabels()  
        
                    Label1.Text = Date.Now.ToLongTimeString  
        
                    Label2.Text = Date.Now.ToLongTimeString  
        
                    Label3.Text = Date.Now.ToLongTimeString  
        
                End Sub 
        
                Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click  
        
                    ChangeLabels()  
        
                End Sub 
        
                Private Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click  
        
                    ChangeLabels()  
        
                End Sub 
        
            End Class

answered on 02 Dec 2009, 05:48 PM

Hello Luc,

When you need to add AJAX pair dynamically (at runtime), you should always do this in a Page event handler, which is executed each time during the page lifecycle (Page_Load, Page_PreRender) so that the control could be ajaxified when the page is initially loaded.

Find more information in these articles:
Add AjaxSettings programmatically
Dynamic ajax settings

Greetings,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.