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

Display animation while loading large content in window

6 Answers 222 Views
Window
This is a migrated thread and some comments may be shown as answers.
Henrik Brinch
Top achievements
Rank 2
Henrik Brinch asked on 28 Apr 2008, 02:48 PM
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.

6 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 29 Apr 2008, 01:09 PM
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
0
Henrik Brinch
Top achievements
Rank 2
answered on 30 Apr 2008, 08:09 AM
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");  
    }  
 
0
Henrik Brinch
Top achievements
Rank 2
answered on 30 Apr 2008, 09:05 AM
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 ...
0
Henrik Brinch
Top achievements
Rank 2
answered on 30 Apr 2008, 09:05 AM
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 ...
0
Susanto Siman
Top achievements
Rank 1
answered on 25 Aug 2008, 02:36 AM
Hi,

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

I am unable to create it.

Thanks.
0
wnl
Top achievements
Rank 1
answered on 29 Aug 2008, 07:31 AM
Great idea. If you can attach sample project with your solution.

Regards
Tags
Window
Asked by
Henrik Brinch
Top achievements
Rank 2
Answers by
Svetlina Anati
Telerik team
Henrik Brinch
Top achievements
Rank 2
Susanto Siman
Top achievements
Rank 1
wnl
Top achievements
Rank 1
Share this question
or