Display animation while loading large content in window

7 posts, 0 answers
  1. Henrik Brinch
    Henrik Brinch avatar
    100 posts
    Member since:
    Aug 2004

    Posted 28 Apr 2008 Link to this post

    Can anyone help me tgo achieve showing an animation in a RadWindow, while the window content loads.

    I'm opening the window client site by:

    window.radopen("BlaBla.aspx""EditWnd");  
     

    But the "BlaBla..aspx" is rather slow loading, so the user experience is just a "blank" window for a second or two.  During this load I'd like to show somekind of loading animation to the user.

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Apr 2008 Link to this post

    Hi Henrik,

    I suggest to use RadAjaxLoadingPanel - you can find how to show it on initial page load here.


    Greetings,
    Svetlina
    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. Henrik Brinch
    Henrik Brinch avatar
    100 posts
    Member since:
    Aug 2004

    Posted 30 Apr 2008 Link to this post

    Hi Svetlina,

    This doesn't give me the desired effect.

    Imagine "BlaBla.aspx" that takes really long time to load and if this at the same time contains the logic for displaying the wait animation ... it will appear too late.

    What I wish for is exactly what appears in the statusbar (the animation), but I don't want the status bar, rather the animation to be centered in the window during the load of the content.

    I'm now trying to do it in another way.   I initiate a javascript function "myOpenWindow" that will show a AjaxLoadingPanel before opening the window.   My plan is then from the client site of the "BigPage.aspx" to call the "myWindowReady" function to hide the AjaxLoadingPanel when the window is fully loaded.  I suppose this can be achieved, but then ... how do I manage to align the AjaxLoadingPanel to be exactly within the RadWindow (and follow it around if it is moved?).   Alternatively I can live with the AjaxLoadingPanel just to be centered within the whole screen.

        function myOpenWindow()  
        {  
            var waitPanel = $find("RadAjaxLoadingPanel1");  
            waitPanel.show("wndTest");  
     
            var oWnd = $find("wndTest");  
            oWnd.setUrl("BigPage.aspx");  
            oWnd.show();     
        }  
     
        function myWindowReady()  
        {  
            var waitPanel = $find("RadAjaxLoadingPanel1");  
            waitPanel.hide("wndTest");  
        }  
     
  5. Henrik Brinch
    Henrik Brinch avatar
    100 posts
    Member since:
    Aug 2004

    Posted 30 Apr 2008 Link to this post

    Ok, investigating further into the Window layout ... I guess I found the solution I was looking for myself :)

    The solution is to modify the content part of the skin (that is copying the original skin and modifying the "windowcontent" style to suit your needs. 

    The "windowcontent" part is shown during the load of the contents in the window.

    So a simple loading animation can be achieved by e.g.

    div.radwindow_Default .windowcontent  
    {  
        height: 100%;  
        border-bottom:0;  
        background:#fff;  
        background:url('Window/loading2.gif') 50% 50% no-repeat;  

    Just if anyone should want the same effect ...
  6. Henrik Brinch
    Henrik Brinch avatar
    100 posts
    Member since:
    Aug 2004

    Posted 30 Apr 2008 Link to this post

    Ok, investigating further into the Window layout ... I guess I found the solution I was looking for myself :)

    The solution is to modify the content part of the skin (that is copying the original skin and modifying the "windowcontent" style to suit your needs. 

    The "windowcontent" part is shown during the load of the contents in the window.

    So a simple loading animation can be achieved by e.g.

    div.radwindow_Default .windowcontent  
    {  
        height: 100%;  
        border-bottom:0;  
        background:#fff;  
        background:url('Window/loading2.gif') 50% 50% no-repeat;  

    Just if anyone should want the same effect ...
  7. Susanto Siman
    Susanto Siman avatar
    3 posts
    Member since:
    Jul 2008

    Posted 24 Aug 2008 Link to this post

    Hi,

    Is it possible for you to create a simple sample asp.net to do this ?

    I am unable to create it.

    Thanks.
  8. wnl
    wnl avatar
    106 posts
    Member since:
    Aug 2007

    Posted 29 Aug 2008 Link to this post

    Great idea. If you can attach sample project with your solution.

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