Display the loading icon over the controls

6 posts, 1 answers
  1. Ajay
    Ajay avatar
    42 posts
    Member since:
    Jul 2010

    Posted 20 Jul 2010 Link to this post

    Hi,

    I am using the sample from Live Demos >> AJAX >> Examples >> Loading Panel >> Loading Images.

    When I run the example from your page it shows the loading icon over the Panel controls with a transpent frame.
    But in my sample application I am not able to produce the same effect. It shows the icon but hides the background items.

    Also the image is always showing in the top center location whereas I specified it to be in BottomRight.

    Please help.

     

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

     

        <style type="text/css">

            .module1

            {

                background-color: #dff3ff;

                border: 1px solid #c6e1f2;

            }

        </style>

     

    </asp:Content>

     

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

     

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

            <AjaxSettings>

                <telerik:AjaxSetting AjaxControlID="Panel1">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />

                    </UpdatedControls>

                </telerik:AjaxSetting>

            </AjaxSettings>

        </telerik:RadAjaxManager>

     

        <br /><br />

       

        <fieldset class="module1">

            <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center" Height="275px">

                <asp:Button ID="Button1" runat="server" Text="Click to see the loading image" OnClick="Button1_Click"

                    Style="margin-top: 15px; margin-left: 15px" CssClass="qsfButtonBigger" />

            </asp:Panel>

        </fieldset>

       

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" EnableSkinTransparency="true" BackgroundPosition="BottomRight">

            <img src="images/loading6.gif" />

        </telerik:RadAjaxLoadingPanel>

     

    </asp:Content>

  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 20 Jul 2010 Link to this post

    Try setting the Transparency property on the RadAjaxLoadingPanel.

    Like in this example:
    http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/transparency/defaultcs.aspx

    They set it like this:

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" Transparency="30">
            <div class="loading">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Ajax/Img/loading1.gif" AlternateText="loading" />
            </div>
        </telerik:RadAjaxLoadingPanel>

    I hope that helps.
  3. Ajay
    Ajay avatar
    42 posts
    Member since:
    Jul 2010

    Posted 21 Jul 2010 Link to this post

    Thanks a lot, it worked like a charm.
  4. Thomas
    Thomas avatar
    6 posts
    Member since:
    Jan 2011

    Posted 07 Jan 2011 Link to this post

    Is it possible to have the Loading Panel be positioned centered over a control? So I have a grid and then I click next I want the panel to load directly centered over the grid? Is this possible?
  5. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 10 Jan 2011 Link to this post

    If you're using the custom loading image, like I posted, then this should work:

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" Transparency="30"
            <div class="loading" style="text-align: center;"
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Ajax/Img/loading1.gif" AlternateText="loading" /> 
            </div
        </telerik:RadAjaxLoadingPanel>

    I added the text-align css property to the div tag.

    I hope that helps.
  6. Thomas
    Thomas avatar
    6 posts
    Member since:
    Jan 2011

    Posted 10 Jan 2011 Link to this post

    I can get it to align center ... I guess the right way to word it is the 'verticle alignment. see image.

    Kind regards,
    Thomas
Back to Top