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

RadAjaxManager loading/displaying controls in reverse order

5 Answers 99 Views

Ajax

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

5 Answers, 1 is accepted

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



<html xmlns="http://www.w3.org/1999/xhtml">

<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");

        }

    }

}

answered on 21 Feb 2012, 03:01 PM

RenderOrderTest.zip

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 >>

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.