loading.gif not displayed in RadAjaxLoadingPanel with Internet Explorer

6 posts, 1 answers
  1. Eric
    Eric avatar
    24 posts
    Member since:
    Jan 2008

    Posted 05 Mar 2010 Link to this post

    Hi, I have a RadAjaxLoadingPanel which has a gif image loaded by GetWebResourceUrl function. When I make an ajax postback the loading panel is displayed (a gray panel covering all the controls in the page) but the gif inside the loading panel is not displayed. This only happens with Internet Explorer 7-8. It works fine with Firefox, Safari and Chrome.

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" BackColor="#E0E0E0" 
            Transparency="20"
            <table style="width: 100%; height: 100%;"
                <tr style="height: 100%;"
                    <td style="width: 100%; text-align: center; vertical-align: middle;">                
                        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
                            style="border-right: 0px; border-left: 0px; border-top: 0px; border-bottom: 0px;" /> 
                    </td> 
                </tr> 
            </table> 
        </telerik:RadAjaxLoadingPanel> 
     
        <telerik:RadAjaxPanel ID="RadAjaxPanel" runat="server" LoadingPanelID="RadAjaxLoadingPanel"
         <div style="width:500px; height:500px"
         </div> 
        </telerik:RadAjaxPanel> 


    I have all the necessary web.config entries

    <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
    <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />

    PS: When I check the telerik web pages (such as http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx) running with RadAjaxLoadingPanel my internet explorer browser successfully shows the gif images. So I think this is not related to internet explorer configuration.

    Thank you...










  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 08 Mar 2010 Link to this post

    Hello Eric,

    When you use template image for your loading panel, you need to set the Skin property of the RadAjaxLoadingPanel to "" to disable its built-in loading indicator. See the configuration on this demo for details.

    Best regards,
    Sebastian
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    24 posts
    Member since:
    Jan 2008

    Posted 09 Mar 2010 Link to this post

    The problem is with the Transparency="20" statement. When I remove it, RadAjaxLoadingPanel works as expected in internet explorer. I think there is a problem with internet explorer displaying an overlapping transparent element and gif image.
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Mar 2010 Link to this post

    Hi Eric,

    Internet Explorer does not support animated images placed inside an element with a filter style applied (the transparency in IE is produced with such a style).

    You can workaround this by creating a custom skin for RadAjaxLoadingPanel and use the desired loading image there.

    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-create-and-use-custom-skins-for-radajaxloadingpanel.aspx

    Regards,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Therrel
    Therrel avatar
    1 posts
    Member since:
    Mar 2011

    Posted 30 Jun 2011 Link to this post

    Dimo,

    I was glad to see your answer, but I even removed the animated image from the loading panel, then replaced it with text (nothing else). But even the text-only content still does not display in Internet Explorer. The issue does seem limited to IE though.

    Is a custom skin truly the only solution? Any other suggestions?

    Thanks
    Danny
  7. Galin
    Admin
    Galin avatar
    526 posts

    Posted 06 Jul 2011 Link to this post

    Hi Therrel,

    I am afraid making a custom skin is the only crossbrowser solution for different transparency levels. Also you can simply override the styles of an existing skin, you need only these three CSS rules:
    .RadAjax_[Skin_Name] .raDiv /*use this rule if you need to change the loading image */
    {
        background-image:url('Ajax/loading.gif');
    }
     
    .RadAjax_[Skin_Name] .raColor /*use this rule if you need to change the bg color*/
    {
        background-color:#d8dee3;
    }
     
    .RadAjax_[Skin_Name] .raTransp /*finally use this rule for changing transparency level*/
    {
        opacity:0.2;
        -moz-opacity:0.2; /*For old Mozilla Browsers*/
        filter:alpha(opacity=20); /*For IE*/
    }

    Please refer to this blog post.

    I hope this helps.

    Kind regards,
    Galin
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017