Display animation while loading large content in window

[Henrik Brinch]

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.

[Svetlina Anati]

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

[Henrik Brinch]

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");
    }

[Henrik Brinch]

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 ...

[Henrik Brinch]

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 ...

[Susanto Siman]

Hi,

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

I am unable to create it.

Thanks.

[wnl]

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

Regards