Multiple Loading Images??

4 posts, 0 answers
  1. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 30 Mar 2012 Link to this post

    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
  2.
  3. Eyup
    Admin
    Eyup avatar
    3962 posts

    Posted 03 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 04 Apr 2012 Link to this post

    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
  7. Eyup
    Admin
    Eyup avatar
    3962 posts

    Posted 09 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top