RadAjaxLoadingPanel backgroundposition ignored

[Andrew]

Hi,

 I must be missing something, but I am trying to place RadAjaxLoadingPanel in over the top of the updating control centred vertically and horizontally. But whatever I try the RadAjaxLoadingPanel is just placed in the top left corner of the updating control.

 I.e in the example below the RadAjaxLoadingPanel1 is always displated in the top left corner of Panel1. Any ideas greatfull received.

       

<asp:Panel ID=Panel1 runat="server">
   <div id="edit">
       <div class="heading"><asp:Label ID="FormTitle" runat="server"></asp:Label></div>
       <p />
       <div>
          <table border="1">...</table>
          <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="1" MinDisplayTime="1000" backgroundPosition="center">
              <asp:Image ID="Image1" runat="server" ImageUrl="../img/ajax-loader.gif" AlternateText="loading">
              <asp:Image>
          </telerik:RadAjaxLoadingPanel>
       </div>

    </div>

</asp:panel>

[Viktor Tachev]

Hi Andrew,

In order to position the loading image in the center of the panel you can set its position via JavaScript. You can check out the approach in the following online demo.

• http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/transparency/defaultcs.aspx

In your scenario the markup would look similar to the following:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Panel1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="requestStart" />
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="1"  MinDisplayTime="1000">
        <asp:Image ID="Image1" runat="server" ImageUrl="../img/ajax-loader.gif" AlternateText="loading" />
</telerik:RadAjaxLoadingPanel>

<asp:Panel ID="Panel1" runat="server"  Width="300px" Height="300px" BorderColor="Red" BorderStyle="Solid">
    <asp:Button Text="click me" runat="server" ID="Button1" OnClick="Button1_Click" />


    content
</asp:Panel>

And the JavaScript:

function requestStart() {

    var loadingPanel = $telerik.findElement(document, "RadAjaxLoadingPanel1");
    var loadingImage = $telerik.findElement(loadingPanel, "Image1");
    var panel1 = $get("Panel1");

    loadingImage.style.position = "relative";
    loadingImage.style.top = (parseInt(panel1.style.height) / 2) + "px";
}

Regards,
Viktor Tachev
Telerik