Loading panel when window opened

[KevinMc]

Is there a way to get a loading panel to show when a window is opened. I have a window that displays a radgrid when opened. It can take a few seconds to load the grid. When it is first opened it is fine, but on subsequent loads it is confusing because it shows the results of the previous load until the grid update completes. So the grid they initially see is incorrect. 

[Svetlina Anati]

Hi KevinMc,

We are planning to implement a loading image for the RadWindow but I cannot tell you exactly when this feature will be available.

For the time being I suggest to use a RadAjaxLoadingPanel as you have suggested. My suggestion is to use the panel's client API to show it when the window is shown and then, when the content page is loaded, hide the main page's panel.

For your convenience I prepared a sample demo project for you and attached it to the thread. The slow loading of the content page is simulated by using the Thread.Sleep method. Feel free to extend the demo further in order to meet your needs and let me know how it goes.


Greetings,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Chris]

I have a question on that sample code.

How can I make the loading panel center with in the browser window?

In my app, the user can click a button that will open a radwindow.  This button is available at different parts of the page.  If you click the button at the bottom of the page, the loading panel is shown at the absolute position defined in your CSS.

The radwindow will center in the browser just fine.

I can't figure out the CSS required to make the loading panel center in the browser, or even better yet, center on the radwindow.

Thanks

[Svetlina Anati]

Hi Chris,

Centering an element on the screen is general ASP.NET knowledge and it is not directly related to RadControls. You can implement the desired effect by using a simple DIV element - after you succeeed to position it as you require just replicate teh same logic to the loading panel. You can also build your own logic to calculate where is teh RadWindow and where to show the loading panel - this is up to you since teh controls offer all teh needed methods in their API.

I also suggest to examine this help article. In case succeeed to implement your scenario with an absoulte positioned DIV but you experience problems with doing this with the loading panel, please open a new support ticket and send us the DIV solution - we will make it work the same way with the panel.

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Oleg Fridman]

This example works great except when you try to set the transparency of the loading panel to something.

I used the example code provided here and set Transparency="30" on the loading panel. After that, the loading panel does not show up anymore.

Thoughts on how I can get this to load would be greatly appreciated.

Thank you,
Oleg Fridman

[Svetlina Anati]

Hello guys,

I am glad to inform you that the RadWindow already offers showing a loading image out of the box. This new feature is controlled by the  RadWindow's ShowContentDuringLoad property which determines whether RadWindow will show the page while it is loaded or will wait until the page is completely loaded (e.g. window.onload is fired in the content page). If ShowContentDuringLoad is set to false, RadWindow will display a loading image that can be controlled with CSS. You can find a sample online demo below:

http://demos.telerik.com/aspnet-ajax/Window/Examples/ShowContentDuringLoad/DefaultCS.aspx

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Oleg Fridman]

Excellent. Thank you.

However, my question still applies for scenarios not involving a RadWindow. Setting the transparency of a loading panel causes it not to show up when called via javascript. Any thoughts as to why? The example here is a good one to illustrate what I mean. It runs great of Transparency is not set, but setting it causes the loading panel not to show up.

[WebGeek]

I have just updated my dll to use 2008.3.1314.35 and I can get the loading graphic to show if I use embedded skins.  The problem I have is that I use custom skins.  When I disable embedded skins and tell the software to use my custom skin the loading graphic no longer shows.  I created the skin based on the window skin that shipped with the previous Q3 release.

Please advise.

[Oleg Fridman]

I just made the changes Telerik recommended and I too have the same problem. We ported the Default2006 skin and now we do not have a loading icon.

[WebGeek]

I just fixed mine by updating my skin - there is a new directive in the Window skin:

/* NEW - Support for displayng the loading image in the iframe's parent TD */
div.radwindow_WKHS td.loading
{
  background: white url('Window/Loading.gif') no-repeat center;   
}

div.radwindow_WKHS td.statusbar .loading
{ 
 background-image:url('Window/Loading.gif'); 
}