Positioning the RadAjaxLoadingPanel

[Carl]

I'm having issues with the placement of the LoadingPanel. For some reason, I am unable to get it to start in the top left corner of the screen. Instead, by default it loads up exactly where the updated control (the control specified in the controlid of the ajaxupdatedcontrol, in the RadAjaxManagerProxy) is.

I can get it to the top right corner by placing a div inside the LoadingPanel, and specifying its top and left css properties, however, when I do this (and also specify the opacity and filter properties too), the modal is transparent but the controls behind it disapear until the modal closes.

If I set the transparency property of the LoadingPanel, I can see the controls, but the modal is positioned where the updatedcontrol is

I also should mention that I'm using the RadAjaxManagerProxy and the modal in a custom Sitefinity module (I figure this is more of a LoadingPanel question than a Sitefinity question).

The panel that is being updated (the ajaxupdatedcontrol) wraps the content of the Module's Control Panel, and the Loading Panel by default is displayed in the top left corner of the Control Panel, to the right of the Command Panel, and under the navigation bar.

Here are two screenshots of my dilemma
http://www.carlj.ca/images/modal1.gif
This is what happens when I specify the transparency property of the RadAjaxLoadingPanel.

http://www.carlj.ca/images/modal2.gif
This is what happens when I don't use the transparency property. Notice that the controls in the middle dispapear?

Below is the code that I'm using. For screenshot #1, use as is. For screenshot #2, remove the transparency from the LoadingPanel

    <telerik:radajaxloadingpanel id="LoadingPanel1" transparency="25" runat="server">
        <div style="position: fixed; top: 0px; left: 0px; z-index: 98; height: 100%; width: 100%; background-color: black; opacity: 0.4; filter: alpha(opacity=40)">

        </div>
        <div style="position: absolute; top: 0px; left: 0px; z-index: 99;height: 100%; width: 100%; ">
            <div style="position: absolute;">
                <div style="position: absolute; z-index: 100; background-color: White;">
                    <asp:Label id="Label2" runat="server" ForeColor="Red">Loading... </asp:Label>
                    <asp:Image id="Image1" runat="server" Width="224px" Height="48px" ImageUrl="Loading.gif"></asp:Image>
                </div>
            </div>
        </div>
    </telerik:radajaxloadingpanel>

Thanks,
Carl J

http://www.carlj.ca/images/modal1.gif

[Iana Tsolova]

Hello Carl,

Please check out this help topic elaborating on how to center RadAjaxLoadingPanel on screen. Check it out and let me know if any issues arise.

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.

[Carl]

Thanks Iana. I received a reply yesterday from Ivan.
It took a bit of hacking around, but I was finally able to get what I needed.
By the way, in that example, the ClientId of the LoadingPanel1 should be used, instead of "LoadingPanel1". ASP.Net likes to append it's own stuff in front of the Id for the control (like ct100_).

Thanks again,
Carl J

[Iana Tsolova]

Hello Carl,

I am happy to hear you solved your case.
As to the help topic:
Your point is right, and I will update it accordingly.

Do not hesitate to contact us again if any questions arise.

Sincerely yours,
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.

[James McQuade]

I am also having a problem with this control.

The idea is:

Level1 - I have 4 tabs

Level2  - I have menus that shows up on selecting respective tab.

I am showing the loading image encapsulated in ajaxpanel but the position changes on click of each tab. 

I need to place the image at a fixed place.

How do i do it?

[Iana Tsolova]

Hello James,

You can set the IsSticky property of the RadAjaxLoadingPanel to true and it will appear where you have set it in the WebForm. You can find more information here.

And for aditional solutions for positioning the RadAjaxLoadingPanel on the page, you can check the below articles:

http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpanelnexttoajaxinitiator.html
http://www.telerik.com/help/aspnet-ajax/ajxcenterloadingpanel.html

Regards,
Iana
the Telerik team