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

RadAjaxManager loading/displaying controls in reverse order

5 Answers 69 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Sub
Top achievements
Rank 1
Sub asked on 14 Feb 2012, 11:32 PM
I am upgrading 2008 Q3 version of telerik control to 2011 Q3 version in my project in .NET 4.0.  I have a RadAjaxManager used in the page that has a updated control as asp:panel. Multiple user controls are dynamically loaded in to the asp:panel. Initally all the instance of the user control displays the loading image before displaying the content. Before with 2008 version, it dislays all the user controls in top down order. but with the 2011 version it displays in bottom up which is really strange. I appreciate any suggestion on fixing this order issue. Thanks in advance!

5 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 15 Feb 2012, 04:58 PM
Hello Sub,

Note that all changes in the RadAjax functionality could be seen in the release Notes for the specific versions here.

However I'm not sure if we have made some breaking change which could affect your site in the described way. Could I kindly ask you to open a regular support ticket and send us runnable version of your application. Thus we will be able to test it locally and do our best to fix the issue.


Greetings,
Maria Ilieva
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Sub
Top achievements
Rank 1
answered on 15 Feb 2012, 10:36 PM
Thanks for the response.

As you requested I have prepared a sample code that recreates the issue.  As I said it used to work fine using the older version (2008) to display the sections top down.

Also there is another behavior broken with the latest version. I used to disable the dropdown when the sections are loading and enable again once the sections are loaded. Now once it is loaded the combobox display does not come back to enabled state. This also used to work fine in the 2008 version of telerik.

Please look at the code and let me know what needs to be fixed to get the correct behavior. Thanks in advance!

WeForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="RadAjaxLoadingPanelIssue.RadAjaxManagerReverseLoading.WebForm1" %>
<%@ 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">
  
<head runat="server">
    <title></title>
    <telerik:RadCodeBlock ID="radCodeBlock" runat="server">
     <script language="javascript" type="text/javascript">
  
         window.onload = function () {
             ShowBusyBox();
         }
  
         function RequestEnd() {
             HideBusyBox();
         }
  
         function ShowBusyBox() {
              var cbCtrl = $find("<%=dropdown.ClientID%>");
             cbCtrl.set_enabled(false);
         }
  
         function HideBusyBox() {
             var cbCtrl = $find("<%=dropdown.ClientID%>");
             cbCtrl.set_enabled(true);
         }
  
         function OnAJAXRequestStart() {
             ShowBusyBox();
         }
  
         function OnAJAXRequestEnd() {
             HideBusyBox();
         }
  
         function OnClientLoad() {
              ShowBusyBox();
         }
  
         function OnClientSelectedIndexChanged() {
              ShowBusyBox();
         }
  
  
    </script>
    </telerik:RadCodeBlock>
  
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <telerik:RadScriptManager ID="RadScriptManager1" EnableScriptCombine="true" EnableScriptGlobalization="true" EnableScriptLocalization="true" runat="server">
        <Scripts>
                  
        </Scripts
      </telerik:RadScriptManager>
    <telerik:RadComboBox ID="dropdown" Width="400px"
        runat="server" ShowToggleImage="true" AllowCustomText="false" RadComboBoxImagePosition="Right"
        UseEmbeddedScripts="false" MarkFirstMatch="true" AutoPostBack="True" OnSelectedIndexChanged="SeclectedItemChanged"
        OnClientSelectedIndexChanged="ShowBusyBox" OnClientLoad="OnClientLoad">
    </telerik:RadComboBox>
    <br /><br />
    <telerik:RadAjaxManager ID="psRadAjaxManager" runat="server"
    OnAjaxSettingCreating="psRadAjaxManager_AjaxSettingCreating" ClientEvents-OnRequestStart="OnAJAXRequestStart" ClientEvents-OnResponseEnd="OnAJAXRequestEnd">
            <AjaxSettings >
                <telerik:AjaxSetting AjaxControlID="dropdown" >
                    <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="dropdown" />
                     <telerik:AjaxUpdatedControl ControlID="mainPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
     </telerik:RadAjaxManager>   
    <asp:Panel ID="mainPanel" runat="server">
    </asp:Panel>
  
    </div>
    </form>
</body>
</html>
 WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Collections;
  
namespace RadAjaxLoadingPanelIssue.RadAjaxManagerReverseLoading
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        private const string SECTION_ID_SUFFIX = "UcSection";
        protected void Page_Load(object sender, EventArgs e)
        {
            LoadDropdown();
            // Initialize the section template with empty content to render the containers with loading image
            // The user controls needs to be rebuilt for each post back as the dynamically added controls are 
            // not preserved between the postbacks by ASP.NET
            InitializeSectionContentTemplate();
        }
  
        private void LoadDropdown()
        {
            System.Collections.ArrayList list = new ArrayList();
  
            list.Add("Item1");
            list.Add("Item2");
            list.Add("Item3");
            list.Add("Item4");
            list.Add("Item5");
  
            dropdown.DataSource = list;
            dropdown.DataBind();
        }
  
        private void InitializeSectionContentTemplate()
        {
            int numSections = 3;
            for (int j = 0; j < numSections; j++)
            {
                Section ucSection = (Section)Page.LoadControl("Section.ascx");
  
                ucSection.ID = "section_" + j + SECTION_ID_SUFFIX;
  
                if (j == numSections - 1)
                {
                    RadAjaxPanel radPanal = (RadAjaxPanel)ucSection.FindControl("sectionPanel");
                    radPanal.ClientEvents.OnResponseEnd = "RequestEnd";
                }
                mainPanel.Controls.Add(ucSection);
            }
        }
  
        protected void SeclectedItemChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            foreach (Control ctrl in this.mainPanel.Controls)
            {
                if ((ctrl.ID != null) && (ctrl.ID.EndsWith(SECTION_ID_SUFFIX)))
                {
                    Section ucSection = (Section)ctrl;
                    ucSection.Reload();
                }
            }
        }
  
        protected void psRadAjaxManager_AjaxSettingCreating(object sender, AjaxSettingCreatingEventArgs e)
        {
            e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
        }
    }
}
Section.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Section.ascx.cs" Inherits="RadAjaxLoadingPanelIssue.RadAjaxManagerReverseLoading.Section" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
    <telerik:RadAjaxPanel ID="sectionPanel"  runat="server">
    <br /><br />
    <asp:Literal ID="litSectionContent" runat="server"></asp:Literal>
       <asp:Timer ID="sectionTimer" Interval="99999999" 
        OnTick="DisplaySection" runat="server" />
    </telerik:RadAjaxPanel>
Section.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
  
namespace RadAjaxLoadingPanelIssue.RadAjaxManagerReverseLoading
{
    public partial class Section : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                sectionTimer.Interval = 40;
                InitializeSectionTemplate("initial content.");
            }
        }
  
        private void InitializeSectionTemplate(string contentPrefix)
        {
            //this.litSectionContent.Text = "<img src='large-loading.gif' /><br/> " + "<div><span>" + contentPrefix+ " " + this.ClientID + " " + DateTime.Now.ToString() + "</span></div>";
            this.litSectionContent.Text = "<img src='large-loading.gif' /><br/> ";
        }
  
        protected void DisplaySection(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(1000);
             
            litSectionContent.Text = "<div><span>Loaded the content." + ((System.Web.UI.Control)(sender)).ClientID + " " + DateTime.Now.ToString() + "</span></div>";
  
            sectionTimer.Interval = 99999999;
            sectionTimer.Enabled = false;
            ScriptManager.RegisterStartupScript(this, this.GetType(), "StopTimerScript", "<script language=\"JavaScript\" type=\"text/javascript\"> " + sectionTimer.ClientID + "._stopTimer();" + "</script>", false);
        }
  
        public void Reload()
        {
            sectionTimer.Interval = 40;
            sectionTimer.Enabled = true;
            InitializeSectionTemplate("Reloaded content");
        }
    }
}
0
Maria Ilieva
Telerik team
answered on 21 Feb 2012, 03:01 PM
Hello,

Thank you for the provided application and excuse us for the late response on this issue.

I tried to replicate the described issue locally but to no avail.
Find attached a sample runnable example which uses your code and works as expected on my end. Test it locally and let me know if I'm missing something.

Kind regards,
Maria Ilieva
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Thomas Bargholz
Top achievements
Rank 1
Iron
answered on 29 Jun 2012, 01:47 PM
I have same ISSUE.


Why I got reverse order of javascript objects creation, even HTML of such controls ordered as well in response.
I can not provide source code of my classes, but

All controls created programmatically
All controls created and initializated in ON_INIT.
All controls wrapped in Web.UI.Panel.

With simple page loading (GET, POST, POSTBACK) order as in contols hierarchy. 
But on Ajax postback (For ajaxifycation used RadAjaxManager) I got javascript control's initialization in revers order.

Please contact me if you need more information.
It very important to us load/create controls on the page in order defined by control's hierarchy.  

I could attach response source if you need it.
0
Maria Ilieva
Telerik team
answered on 03 Jul 2012, 02:05 PM
Hi Thomas,

Please review the answer provided in the support ticket you have opened for the same behaviour.

Greetings,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Ajax
Asked by
Sub
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Sub
Top achievements
Rank 1
Thomas Bargholz
Top achievements
Rank 1
Iron
Share this question
or