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

Positioning the RadAjaxLoadingPanel

5 Answers 366 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Carl
Top achievements
Rank 1
Carl asked on 27 Feb 2009, 02:20 PM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Iana Tsolova
Telerik team
answered on 04 Mar 2009, 12:46 PM
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.
0
Carl
Top achievements
Rank 1
answered on 04 Mar 2009, 01:07 PM
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
0
Iana Tsolova
Telerik team
answered on 07 Mar 2009, 09:21 AM
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.
0
James McQuade
Top achievements
Rank 1
answered on 22 Jun 2010, 05:22 PM
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?
0
Iana Tsolova
Telerik team
answered on 24 Jun 2010, 07:32 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Ajax
Asked by
Carl
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Carl
Top achievements
Rank 1
James McQuade
Top achievements
Rank 1
Share this question
or