Display the loading icon over the controls

[Ajay]

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>

[Cori]

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.

[Ajay]

Thanks a lot, it worked like a charm.

[Thomas]

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?

[Cori]

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.

[Thomas]

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

Kind regards,
Thomas