Multiple Loading Images??

[Ramjet]

Why does this line of code:

<telerik:RadAjaxLoadingPanel ID="InvDateLoadPanel" runat="server" ForeColor="#EEB211" BackImageUrl="~/images/ajax/BMGI_GoldLoading.gif" BackgroundPosition="Center" />

Produce 4 loading images across my loading panel??

Full code for Ajax Manager:

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

        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnl_InvDate">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnl_InvDate" LoadingPanelID="InvDateLoadPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>

    </telerik:RadAjaxManager>

and the control:

<asp:Panel ID="pnl_InvDate" runat="server">
     <table id="tbl_InvDate" border="0" cellpadding="4" cellspacing="0">
          <tr>
               <td>Invoice Date</td>
               <td>
                    <telerik:RadDatePicker ID="rdt_InvDate" runat="server" Skin="Hay" AutoPostBack="true" ShowPopupOnFocus="true" Width="100" OnSelectedDateChanged="selected" />
               </td>
          </tr>
   </table>
</asp:Panel>

Controls version: 2012.1.301.40

TIA
JB

[Eyup]

Hi John,

Thank you for contacting us.
In order to solve this issue and fully customize your loading image try creating an image tag as in the sample below:

<telerik:RadAjaxLoadingPanel ID="MyLoadingPanel" runat="server" BackgroundPosition="Bottom" Transparency="30">
       <asp:Image ID="myImage" runat="server" ImageAlign="Middle" ImageUrl="loading_image.gif" />
</telerik:RadAjaxLoadingPanel>

Hope this helps. Feel free to turn to us if you have further questions.

Regards,
Eyup
the Telerik team

[Ramjet]

This improves the condition but not completely resolves it.

First why use an image tag? Your method:

<telerik:RadAjaxLoadingPanel ID="InvDateLoadPanel" runat="server" BackColor="#EEB211">
     <asp:Image id="img_GoldLoad" runat="server" ImageAlign="Middle" ImageUrl="~/images/ajax/BMGI_GoldLoading.gif" />
</telerik:RadAjaxLoadingPanel>

 
renders this:

<div style="display: none; background-color: rgb(238, 178, 17);" id="InvDateLoadPanel">
     <img id="img_GoldLoad" align="middle" src="images/ajax/BMGI_GoldLoading.gif">
</div>

So why is this better (better == just one loading image) than my original way:

<telerik:RadAjaxLoadingPanel ID="InvLstLoadPanel" runat="server" BackColor="#00674E" BackImageUrl="~/images/ajax/BMGI_GreenLoading.gif" />

which renders this:

<div id="InvLstLoadPanel" style="display: none; background-image: url("images/ajax/BMGI_GreenLoading.gif"); background-color: rgb(0, 103, 78);">

Don't get me wrong....it works your way. There is only one loading image but I can't see why one should work and the other not.


Secondly the loading image is centered horizontally but always, not matter what combination I try, vertically at the top. I would like it in the middle of the panel.

Thank You for your help with this
JB

[Eyup]

Hi John,

When you define a background image for your RadLoadingPanel, its default repeating is enabled (tile mode). To disable it  you need to change .RadAjax css style. In your case try to add background-repeat: no-repeat; and background-position: center center; .
The following example shows how to easily add a background image to your ajax loading panel:

<style type="text/css">
        .RadAjax
        {
             background url('loading_image.gif') no-repeat center center;
        }
</style>

That way, you can apply your preferred look and style to your loading item. 

Kind regards,
Eyup
the Telerik team