RadAjaxManager - Multiple Requests - Confusion

4 posts, 0 answers
  1. Jason
    Jason avatar
    4 posts
    Member since:
    Jun 2009

    Posted 17 Feb 2010 Link to this post

    Hello!

    I have a very simple example below but am getting confusing results.  I was hoping that somebody could help me understand what is happening and how to get the desired results.

    I have a RadAjaxManager configured so that an ASP.NET Button's click event updates a div (containing a label), with a corresponding RadAjaxLoadingPanel.

    The button's server side click event looks like this:

    protected void Button1_Click(object sender, EventArgs e) {  
     
         // Increment number in Label1  
         int i = Int32.Parse(Label1.Text);  
         Label1.Text = (i + 1).ToString();  
     
         // Sleep 5 seconds to simulate latency  
         Thread.Sleep(5000);  
     

    Currently I have the RadAjaxManager's 'RequestQueueSize' property set to 0, the default.  I want to keep it this way so that if a 2nd request occurs before the 1st request's response returns, that 1st request will be cancelled and the 2nd request will be sent.

    This is occuring, however, when you click the button twice within that five second wait, two undesrable things happen that I would not have expected to happen.

    1. The loading panel disappears on the 2nd click, even though the 2nd request is still processing.  I would like it to stay until the response from the 2nd click returns so that the user knows their 2nd request is still processing.  I have even tried forcing this behavior myself using the RadAjaxManager's 'OnRequestStart' and 'OnResponseEnd' client events (with the help of Telerik documentation) but was not able to get the loading panel to remain for both clicks within the 5 seconds.  Question: How can I get the loading panel to stay until the 2nd request's response returns?  Do I have something configured wrong? Note: I did notice that if I increase the RadAjaxManager's 'RequestQueueSize' that a loading panel remains until the last request's response returns, but unfortunately I need the RequestQueueSize set to 0.
    2. I notice that the order of events for the RadAjaxManager is slightly confusing.  I have some client-script that writes out to the screen every time the 'OnRequestStart' and 'OnResponseEnd' events get fired.  When I click the button twice within the five second wait, I see that these events get called in the following order:

     

      • OnRequestStart
      • OnRequestStart
      • OnResponseEnd
      • OnResponseEnd
      • OnResponseEnd

        Question: Why does the OnResponseEnd get called three times?  Note: if you continue to click the button more than twice, the 'OnResponseEnd' event gets called even more times.

    Here is my aspx markup.  The javascript just writes which events were fired into a div at the bottom of the screen.  The two styles are included to better display what is happening.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    <%@ Register TagPrefix="Telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %> 
    <!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 id="Head1" runat="server">  
        <title></title>  
     
        <script type="text/javascript">  
     
            function WriteClientEvents(text) {  
     
                var div = $get("DivClientEvents");  
                div.outerHTML = text + "<br>" + div.outerHTML;  
     
            }  
     
            function AjaxRequestStart(sender, args) {  
     
                WriteClientEvents("Request");  
     
            }  
     
            function AjaxResponseEnd(sender, args) {  
     
                WriteClientEvents("Response");  
     
            }  
                 
        </script> 
     
        <style type="text/css">  
             
            .loading  
            {  
                border: solid 1px black;  
                background-color: #fff;  
                height: 100px;  
                width: 200px;  
            }  
              
            #DivTimesClicked   
            {  
                border: solid 1px black;   
                height: 300px;  
                width: 300px;  
            }  
            
        </style> 
          
    </head> 
    <body> 
        <form id="form1" runat="server">  
       
            <Telerik:RadScriptManager ID="rsm1" runat="server">  
            </Telerik:RadScriptManager> 
              
            <Telerik:RadAjaxManager   
                ID="ram1"   
                runat="server"   
                RequestQueueSize="0"   
            > 
                <ClientEvents OnRequestStart="AjaxRequestStart" OnResponseEnd="AjaxResponseEnd">  
                </ClientEvents> 
                <AjaxSettings> 
                    <Telerik:AjaxSetting AjaxControlID="Button1" EventName="Button1_Click">  
                        <UpdatedControls> 
                            <Telerik:AjaxUpdatedControl ControlID="DivTimesClicked" LoadingPanelID="LoadingPanel1" /> 
                        </UpdatedControls> 
                    </Telerik:AjaxSetting> 
                </AjaxSettings> 
            </Telerik:RadAjaxManager> 
              
            <br /><br /> 
              
            <Telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="" Transparency="30" BackgroundPosition="Center">  
                Loading...  
            </Telerik:RadAjaxLoadingPanel> 
              
            <asp:Button ID="Button1" runat="server" Text="Increment Times Clicked" OnClick="Button1_Click" /> 
              
            <br /><br /> 
              
            <div id="DivTimesClicked" runat="server">  
                Times Clicked:  
                <asp:Label ID="Label1" runat="server" Text="0"></asp:Label> 
            </div> 
              
            <br /><br /> 
              
            <h2>RadAjaxManager Client Events...</h2> 
            <hr /> 
            <div id="DivClientEvents">  
            </div> 
     
        </form> 
    </body> 
    </html> 

    I look forward to understanding what is happening here.  Thank you for your help!
    --Jason

  2. Jason
    Jason avatar
    4 posts
    Member since:
    Jun 2009

    Posted 19 Feb 2010 Link to this post

    My post above can be simplified to the following two questions (but feel free to use the code I posted above as an example):

    When working with a RadAjaxManager whose 'RequestQueueSize' property is defaulted to 0, when you launch a 2nd asynchronous request before the 1st returns:

    1. Why does the loading panel disappear upon launching the 2nd request as opposed to remaining until that 2nd request is done processing?  How can I get the loading panel to stay?
    2. Why do the order of events look like below?  That is, why does the 'OnResponseEnd' event get called 3 times instead of 2?
      1. OnRequestStart
      2. OnRequestStart
      3. OnResponseEnd
      4. OnResponseEnd
      5. OnResponseEnd

     

     Thank you for your time!

  3. Jason
    Jason avatar
    4 posts
    Member since:
    Jun 2009

    Posted 22 Feb 2010 Link to this post

    Another observation is that the control that initiated the 2nd asynch request (before the 1st asynch request returned) is the "__EVENTTARGET" for the sender in all 3 of the 'OnResponseEnd' events that get called (rather than the control that initiated the 1st asynch request).

    Any help understanding these things would be much appreciated.  Thanks guys!  Have a blessed day,
    --Jason 




  4. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 23 Feb 2010 Link to this post

    Hello Jason,

    As you already found, to overcome this behavior you can set he RadAjaxManager RequestQueueSize property so it handles the multiple requests. Note that different browsers handle the async requests different. Usually only the last request finishes and the previous ones are aborted if the RequestQueueSize is set to 0(zero).
    However, to make the loading panel stay over the updated div, you either need to increase the RequestQueueSize. Or if you still prefer to leave the RequestQueueSize value to 0, then I suggest you to disable the button in the OnRequestStart client-side event handler and enable it in the OnResponseEnd client-side event handler.

    Regards,
    Iana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top