show loading panel on initial page load

22 posts, 0 answers
  1. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 16 Jun 2008 Link to this post

    I have a grid on a few of my pages which takes the user to a deatil page using Response.Redirect.
    When i click on the grid the loading image shows but when the control is transfered to the detail page, before the page is rendered there is a blank screen.
    I want to show a loading image there as well till the time the page is rendered.

    How can I do that?
    I tried the implementation as shown in this example :
    http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html

    But it did not work for me.
  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 19 Jun 2008 Link to this post

    Hello newbie,

    Can you please confirm that you placed another RadAjaxManager instance on the other page (to which you redirect) when utilizing the approach presented in the documentation article you referenced? Also verify that the AjaxRequest handler is reached as expected. This should be sufficient to display the loading image while the page is loaded completely.

    An alternative approach is presented in this section of the help (note that you will need to use the approach inside the window.onload handler instead intercepting the OnRequestStart client event of the manager).

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 19 Jun 2008 Link to this post

    I tried both the approaches.
    I have a master page which has a RadAJAXManager.
    One of the content page is a grid page which takes the user to a detail page.

     The blank screen shows when I come from the grid to the detail page before the page is rendered. It's not on a button click on the same page.Also with the first approach my Panel2 is always visible.

    For the second approach I tried by putting the RadAJAXManagerProxy on the detail page(as the master page already has a RadAJAXManager)

    RadAJAXManagerProxy does not have a AjAXRequest.

    How do I implement the alternative approach in this scenario?
  5. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 20 Jun 2008 Link to this post

    Hello newbie,

    I assume that you have two different pages (connected on redirect) - is this correct? If so, you can use different RadAjaxManager instance on each of those two pages and initiate the ajax request (to display the loading image on the detail page) wiring the window.onload client event on the page to which you redirect. Let me know whether this makes sense in your configuration.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 20 Jun 2008 Link to this post

    I am sorry if I am not understanding this correctly.

    I have two different pages on redirect but both have the same master page.And the master page has a RADAJAXManager.
    I believe that I have to put RadAJAXManagerProxy on the content pages in this scenario.
    I am unable to initiate the ajaxRequest from the RadAJAXManagerProxy the way it is implemented in the example.

    Am I making sense ?
  7. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 23 Jun 2008 Link to this post

    Hello newbie,

    Thank you for the clarification. Now I see your point more clearly.

    In order to trigger an ajax request in master/content page scenario, consider using the GetCurrent method of RadAjaxManager to locate it on the master page and start the asynchronous request:

    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Ajax/Examples/Manager/MasterPage/DefaultCS.aspx (see the Description section of the demo)

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. David
    David avatar
    18 posts
    Member since:
    Apr 2008

    Posted 06 Aug 2008 Link to this post

    What event does the proxy expose so that I can handle the ajaxRequest on the content page-behind?  I see that the actual ajax manager exposes OnAjaxRequest, but the proxy exposes nothing of the sort.  At least as far as I can tell. 

    Thanks,
    David
  9. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 07 Aug 2008 Link to this post

    Hello David,

    The RadAjaxManagerProxy does not expose OnAjaxRequest event, however you can locate the ajax manager instance with the method discussed previously in this thread and hook its OnAjaxRequest event in order to process some custom logic on the server.

    Best regards,
    Stephen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Ryan Means
    Ryan Means avatar
    32 posts
    Member since:
    Dec 2006

    Posted 28 Jan 2009 Link to this post

    It looks like you have to set the OnRequestStart and OnResponeEnd in the page OnInit event.  I tried it on the Load event and it did not work.

    protected override void OnInit(EventArgs e)  
    {                        
        RadAjaxManager.GetCurrent(this.Page).ClientEvents.OnRequestStart = "searchRequestStart";  
        RadAjaxManager.GetCurrent(this.Page).ClientEvents.OnResponseEnd = "searchRequestEnd";  
     
        base.OnInit(e);  
  11. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 28 Jan 2009 Link to this post

    Hi Ryan,

    Generally speaking, both client-side event can be attached either in the OnInit or OnLoad handler of the page. Can you please verify that you are using the latest release 2008.3.1314 of RadControls for ASP.NET AJAX in your project? If the problem persists, please paste your page definition in this thread in order to examine your complete code logic and research the matter further.

    Best regards,

    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 09 Apr 2009 Link to this post

    Was having an issue getting this to work but found it: ScriptManager problem.

    I got it working using the link provided:
    http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html

    However, it seems my ajaxrequest is being called every 20 seconds or so (maybe a bit more or less) !!!  Like it's on a timer.

    Any ideas why the page would be calling the ajaxrequest every x seconds?

    Thx
  13. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 10 Apr 2009 Link to this post

    Hi Kevin,

    This is indeed strange since the code from the article merely initiates an extra ajax call inside the PageLoaded handler of the PageRequestManager to display the loading image. Is there any additional code in your case which may start other async requests every 20 seconds?

    I will appreciate if you post the code from the problematic page in this forum thread (using the 'Format code block' dialog from the upper right corner of the forum editor). Thus I will be able to research the matter further and will get back to you with my findings.

    Best regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  14. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 10 Apr 2009 Link to this post

    I'm sure I'm doing something stupid!  Here's a simple test app I did.  Default has a hyperlink which calls WebForm1.  WebForm1 has the code in it that is very similar to the sample you have.  It sleeps 2 seconds then makes a panel area visible.

    I added some code to display the current time.  It shows that the page is being reloaded every 2-3 seconds.

    Code below for WebForm1.  Default is just doing a hyperlink.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="LoadTest.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>  
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager Runat="server">  
        </telerik:RadScriptManager> 
     
        <div> 
     
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
           <script type="text/javascript">  
               function pageLoad(sender, eventArgs)  
               {  
                   $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");  
               }     
           </script> 
        </telerik:RadCodeBlock> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
           OnAjaxRequest="RadAjaxManager1_AjaxRequest">  
           <AjaxSettings> 
               <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
                   <UpdatedControls> 
                       <telerik:AjaxUpdatedControl ControlID="Panel1" 
                           LoadingPanelID="RadAjaxLoadingPanel1" /> 
                   </UpdatedControls> 
               </telerik:AjaxSetting> 
           </AjaxSettings> 
        </telerik:RadAjaxManager> 
           <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" 
            Width="75px">  
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
                style="border: 0px;" /> 
        </telerik:RadAjaxLoadingPanel> 
            <h2>WebForm1</h2> 
        <asp:Panel ID="Panel1" runat="server">  
            <asp:Panel ID="Panel2" runat="server" Visible="false">  
                <h1>Panel2 is now visible</h1> 
            </asp:Panel> 
            <asp:Label ID="lblInfo" runat="server"></asp:Label>&nbsp;<-- if that time updates it means the page is loading again - why?!  
        </asp:Panel> 
          
        </div> 
        </form> 
    </body> 
    </html> 
     

    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;  
     
     
    namespace LoadTest  
    {  
        public partial class WebForm1 : System.Web.UI.Page  
        {  
            protected void Page_Load(object sender, EventArgs e)  
            {  
                lblInfo.Text = DateTime.Now.ToLongTimeString();  
     
                if (!this.IsPostBack)  
                {  
                    //first call work...  
                }  
                //every call work...  
            }  
     
            protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  
            {  
                if (e.Argument == "InitialPageLoad")  
                {  
                    System.Threading.Thread.Sleep(2000);  
                    Panel2.Visible = true;  
                }  
            }  
     
        }  
    }  
     

    Save me from myself!

    Thx
  15. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 10 Apr 2009 Link to this post

    Hi Kevin,

    Please try modifying the client script as shown below and see if it makes any difference:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
    <script type="text/javascript">  
    function pageLoad(sender, eventArgs)  
    {  
        if(!eventArgs.get_isPartialLoad())  
        {  
            $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");  
        }  
    }     
    </script>  
    </telerik:RadCodeBlock> 

    Let me know how it goes.

    Regards,
    Iana
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  16. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 10 Apr 2009 Link to this post

    That seems to have done it!

    Please explain the difference between that call (get_isPartialLoad) and the original posted sample so I can correctly apply this to other parts of my app.

    Thx!
    Kevin
  17. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 10 Apr 2009 Link to this post

    Hi Kevin,

    The get_isPartialLoad proerty return true or false is callback or postback is performed respectively. Furthermore, it returns false on initial load and true after each subsequent ajax request performed.
    Find more information here.

    Best wishes,
    Iana
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  18. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 13 Apr 2009 Link to this post

    I've had to modify the code posted above just a bit and am having an issue.  I modified the code to support custom paging.  Per the demo code on custom paging, it is using NeedDataSource among those code changes.

    My original code above that does a great job of showing loading graphic during load, now does not work because I cannot figure out just how to trigger the NeedDataSource as part of the InitialPageLoad logic in the page load ajax request.  It seems to want to fire after that request.

    Can you recommend (or provide some quick sample code) the correct way to get both the page load via initial ajax request *and* correctly triggering an NeedDataSource so that it runs during that initial ajax request?

    Thx
  19. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Apr 2009 Link to this post

    Hello Kevin,

    In order to fire the NeedDataSource of RadGrid explicitly you could try rebinding it:

        protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)     
            {     
                if (e.Argument == "InitialPageLoad")     
                {     
                    System.Threading.Thread.Sleep(2000);     
                    Panel2.Visible = true;   
                    RadGrid1.Rebind();    
                }     
            }    
     
    Find more information abour the Rebind() method in the below articles:
    http://www.telerik.com/help/aspnet-ajax/grdcommandsthatinvokerebindimplicitly.html
    http://www.telerik.com/help/aspnet-ajax/grdvisibleinvisibleconventions.html

    All the best,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  20. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 16 Apr 2009 Link to this post

    Now I'm really confused.  In stepping through the code, it looks like the _AjaxRequest method is not being called until after needdatasource is already called!  This means the whole idea of showing the loading panel while the page is loading is not working because _NeedDataSource is the slow call.

    So, when clicking to the page, you now see no loading panel while the slow part runs, then it flashes with the ajax load and it loads again, then displays.

    The order seems to be as below.  How can I make sure the _AjaxRequest is called before the NeedDataSource so that I can do the slow databind inside _AjaxRequest instead of before it?

    Page_Load
    RadGrid1_NeedDataSource

    RadGrid1_ItemDataBound
    Page_Load
    RadAjaxManager1_AjaxRequest

    Hard to send a sample app as the code is using MS EntLib4.1 and MVP approach.

    Thx

     

  21. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 16 Apr 2009 Link to this post

    I ended up having to do this:

    Put slow loading code in ajaxrequest...

            protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  
            {  
                if (e.Argument == "InitialPageLoad")  
                {  
                    //this._presenter.OnViewInitialized();  
                    _presenter.Controller.CurrentUser.PageSize = RadGrid1.PageSize;  
                    RadGrid1.DataSource = _presenter.OnNeedDataSource();  
                    RadGrid1.VirtualItemCount = _presenter.Controller.CurrentUser.NumberDomainRecords;  
                    RadGrid1.DataBind();  
                }  
            }  
     

    Then in the NeedDataSource specifically NOT do any work on InitialLoad:

            protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)  
            {  
                if (e.RebindReason != GridRebindReason.InitialLoad)  
                {  
                    _presenter.Controller.CurrentUser.PageSize = RadGrid1.PageSize;  
                    RadGrid1.DataSource = _presenter.OnNeedDataSource();  
                    RadGrid1.VirtualItemCount = _presenter.Controller.CurrentUser.NumberDomainRecords;  
                }  
            }  
     

    Seems to work, but is it the best way to do it?

    Thx
  22. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 17 Apr 2009 Link to this post

    Hello Kevin,

    I agree this is a good approach for achieving the desired effect. However, what I do not agree is messing advanced and simple databinding for your grid. Therefore I would suggest to modify the AjaxRequest event handler as below:

        protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)     
            {     
                if (e.Argument == "InitialPageLoad")     
                {     
                    //this._presenter.OnViewInitialized();     
                    _presenter.Controller.CurrentUser.PageSize = RadGrid1.PageSize;                     
                    RadGrid1.VirtualItemCount = _presenter.Controller.CurrentUser.NumberDomainRecords;     
                    RadGrid1.Rebind();     
                }     
            }     
        
     


    Best wishes,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  23. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 17 Apr 2009 Link to this post

    You are absolutely right.  Changes made.

    Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017