RadAjaxManager loading/displaying controls in reverse order

6 posts, 0 answers
  1. Sub
    Sub avatar
    91 posts
    Member since:
    Nov 2007

    Posted 14 Feb 2012 Link to this post

    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!
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 15 Feb 2012 Link to this post

    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 >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sub
    Sub avatar
    91 posts
    Member since:
    Nov 2007

    Posted 15 Feb 2012 Link to this post

    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");
            }
        }
    }
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Feb 2012 Link to this post

    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 >>
  6. Thomas Bargholz
    Thomas Bargholz avatar
    7 posts
    Member since:
    Oct 2006

    Posted 29 Jun 2012 Link to this post

    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.
  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 03 Jul 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017