1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Positioning the RadAjaxLoadingPanel within a Custom Module

Positioning the RadAjaxLoadingPanel within a Custom Module

4 posts, 0 answered
  1. Carl
    Carl avatar
    23 posts
    Registered:
    15 Jul 2008
    02 Mar 2009
    Link to this post
    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 in the top left corner of the custom Control Panel (to the left of the Command Panel, and under the navigation/menu bar).

    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 in the Control Panel behind it disappear until the modal closes. However, the controls in the Command Panel and the Menu bar are visible (I'm assuming it has to do with the panel that's being updated).

    If I set the transparency property of the LoadingPanel, I can see the controls, but the modal is positioned in the top left corner of the Control Panel.

    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


  2. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    03 Mar 2009
    Link to this post

    Hello Carl,

    there are several ways to achieve what you are trying to do. Please review the following article on ajax loading panel positioning:

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

    Mostly, the problem is css related, but nevertheless, do let us know if we can assist you with this furthermore.

    Best wishes,
    Ivan
    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.
  3. Carl
    Carl avatar
    23 posts
    Registered:
    15 Jul 2008
    03 Mar 2009
    Link to this post
    Thanks Ivan.

    I am having a few small issues with it though. First off, in the centerUpdatePanel, "document.getElementById("LoadingPanel1")" should probably be changed to "document.getElementById('<%=this.FindControl("LoadingPanel1").ClientID %>')". In my case, with Sitefinity, a ct100_ is added to the front of the control's Id.

    Now, for my small issue. In the javascript, I set the element.style.top and element.style.left to both 0px, and height and width to 100% (I want the panel to cover the whole screen). I also set the backgroundcolor in the LoadingPanel to Black, and set transparency to 90.

    When I run my code, the panel goes to where I want it, but the backgroundcolor is completely black (non transparent). If I take IsSticky off, the panel goes transparent, but is placed back in the top left corner of the Control Panel, instead of the top left corner of the page.
  4. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    03 Mar 2009
    Link to this post
    Hello Carl,

    glad this has helped you.

    As for your problems, yes you should use:
    document.getElementById('<%= LoadingPanel1.ClientID %>').  

    You don't need FindControl.

    Second, I suggest you break this problem into two parts. Namely, when you want to display a loader, you do 2 things.
    a) cover screen with transparent background
    b) show loader on top of the transparent background

    There is also a thread on Telerik blogs, with several different approaches and solutions which you may want to check out:
    http://www.telerik.com/community/forums/aspnet-ajax/ajax/center-radajaxloadingpanel.aspx

    I hope you will find this information helpful. Let us know if there is anything else we can do for you.

    Best wishes,
    Ivan
    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.
Register for webinar
4 posts, 0 answered