RadAjaxLoadingPanel - render bug

[matt]

hello,

my pages use the RadAjaxLoadingPanel, which is cool.

however, when CSS is disabled for my pages, i think it is a bug for the animated loading-gif to visible 100% of the time at the page's bottom. 

the animated loading-gif should only be visible on the area using it, while its actively being used (based on user event).

similarly, it should not render "Loading..." at the bottom of the page all the time on text-only browsers, such as Linq.


telerik, can you address?

thanks!
matt

[Kevin Babcock]

Hi Matt,

The RadAjaxLoadingPanel is always rendered to the page. However, JavaScript is used to show/hide it by setting its visibility style attribute to true/false and then overlaying the loading panel on top of the element which caused the post back. If you have disabled CSS on your page, then the visibility style attribute will obviously not work and your loading panel will always be visible.

I hope that explanation helps. If you have further questions, please let me know.

Sincerely,
Kevin Babcock

[matt]

that sounds like a bug to me. some devices are not able to load the CSS sheets, and on those devices it always shows up.

if it were set to no-visibility by default, in javascript, then enabled when needed, that would solve the problem.

one must remember that w/ the popularity of hand-held devices rising, normal .CSS docs may not always be rendered. thus controls should degrade gracefully. most of the other Telerik controls do.


matt

[Jack]

I agree this is a shortcoming with the design of the RadAjaxLoadingPanel.  For ADA compliance, sites need to support disabled CSS.  Having loading panels always visible in that case is not good.

I used the following to detect/disable the image.  Basically I test for CSS being disabled, and if it is, I remove the image element from the DOM.  Sorry, Format Code Block is busted at the moment but you get the idea...

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="Right" Skin="" Transparency="0" >
   <asp:Image ID="Image1" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Submitting..." style="position: relative; left: 10px; top: -21px;" ></asp:Image>
</telerik:RadAjaxLoadingPanel>

    <script type="text/javascript">
        try {
            var cssdisabled = false;
            var testcss = document.createElement('div');
            testcss.style.position = 'absolute';
            document.getElementsByTagName('body')[0].appendChild(testcss);
            if (testcss.currentStyle) var currstyle = testcss.currentStyle['position'];
            else if (window.getComputedStyle) var currstyle = document.defaultView.getComputedStyle(testcss, null).getPropertyValue('position');
            var cssdisabled = (currstyle == 'static') ? true : false;
            document.getElementsByTagName('body')[0].removeChild(testcss);

            var twirlyImage = document.getElementById("BodyContentPlaceholder_Image1");
            if (cssdisabled && twirlyImage != null) {
                twirlyImage.parentNode.removeChild(twirlyImage);
            }
        }
        catch (err) {
        }
    </script>