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

show loading panel on initial page load

21 Answers 1228 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
newbie
Top achievements
Rank 1
newbie asked on 16 Jun 2008, 04:52 PM
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.

21 Answers, 1 is accepted

Sort by
0
Sebastian
Telerik team
answered on 19 Jun 2008, 08:25 AM
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
0
newbie
Top achievements
Rank 1
answered on 19 Jun 2008, 04:10 PM
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?
0
Sebastian
Telerik team
answered on 20 Jun 2008, 01:13 PM
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
0
newbie
Top achievements
Rank 1
answered on 20 Jun 2008, 04:08 PM
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 ?
0
Sebastian
Telerik team
answered on 23 Jun 2008, 08:49 AM
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
0
David
Top achievements
Rank 2
answered on 06 Aug 2008, 10:21 PM
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
0
Sebastian
Telerik team
answered on 07 Aug 2008, 10:36 AM
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.
0
Ryan Means
Top achievements
Rank 1
answered on 28 Jan 2009, 04:01 PM
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);  
0
Sebastian
Telerik team
answered on 28 Jan 2009, 05:27 PM

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.
0
Kevin
Top achievements
Rank 2
answered on 10 Apr 2009, 04:42 AM
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
0
Sebastian
Telerik team
answered on 10 Apr 2009, 08:24 AM
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.
0
Kevin
Top achievements
Rank 2
answered on 10 Apr 2009, 02:23 PM
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
0
Iana Tsolova
Telerik team
answered on 10 Apr 2009, 03:08 PM
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.
0
Kevin
Top achievements
Rank 2
answered on 10 Apr 2009, 03:28 PM
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
0
Iana Tsolova
Telerik team
answered on 10 Apr 2009, 03:53 PM
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.
0
Kevin
Top achievements
Rank 2
answered on 14 Apr 2009, 04:21 AM
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
0
Iana Tsolova
Telerik team
answered on 16 Apr 2009, 10:01 AM
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.
0
Kevin
Top achievements
Rank 2
answered on 16 Apr 2009, 06:44 PM
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

 

0
Kevin
Top achievements
Rank 2
answered on 16 Apr 2009, 07:18 PM
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
0
Iana Tsolova
Telerik team
answered on 17 Apr 2009, 02:17 PM
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.
0
Kevin
Top achievements
Rank 2
answered on 17 Apr 2009, 03:28 PM
You are absolutely right.  Changes made.

Thanks!
Tags
Ajax
Asked by
newbie
Top achievements
Rank 1
Answers by
Sebastian
Telerik team
newbie
Top achievements
Rank 1
David
Top achievements
Rank 2
Ryan Means
Top achievements
Rank 1
Kevin
Top achievements
Rank 2
Iana Tsolova
Telerik team
Share this question
or