RadAjaxLoadingPanel, UserControl and VS 2008

[Deborah Gregory]

Hi,
Our project just migrated from VS 2005 to VS 2008.  Several of our pages use Ajax and in order to standardize our look and feel we created a UserControl for the text and images we want to use on the RadAjaxLoadingPanel whenever it is implemented.  It works great.  The problem is that in Design Mode in VS 2008, the panel covers all the other objects on the page.  When I remove the UserControl, the page is presented correctly.  Now, I realize that I could dynamically load the user control, but that is not optimal.  Since this wasn't causing a problem in VS 2005, I was wondering if there were known issues here and the best workaround for the problem.

Thanks,
Debbie

[Todd Anglin]

Hello Debbie-

Would you mind sharing the code that you're using for your LoadingPanel? I'm not sure if there is a workaround for this, but I'll be happy to test your code in VS2008 SP1 and see if the behavior persists in the latest Telerik release. I have a feeling it may be the styles applied to your LoadingPanel that are affecting the design-time view, but I can't be sure without seeing your code.

I look forward to providing more info.

-Todd

[Deborah Gregory]

Thanks, Todd.  It turns out that it has nothing to do with the UserControl itself, but the <div>s on it.  Put a RadAjaxLoadingPanel on an aspx page, add the following to it:

<div id="progressBackgroundFilter">
</div>
<div id="processMessage" style="text-align:center">
    <b>Loading...</b>
    <br />
    <br />
    <asp:Image ID="LoadingImage" runat="server" ImageUrl="~/Resources/Images/ajax-loader.gif"
        AlternateText="Loading..." />
</div>

The image file can be any image you have accessible.

Also include this style:

    <style type="text/css">
        #progressBackgroundFilter
        {
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            overflow: hidden;
            padding: 0;
            margin: 0;
            background-color: #AAAAAA;
            filter: alpha(opacity=75);
            opacity: 0.5;
            z-index: 1000;
        }
    </style>

Note the ID for the first div.  This is the one that causes the issue.  If you look at the page in design view the entire page gets covered in the loading panel. It has something to do with the style, but I can't figure it out - I didn't code it in the first place and I'm not familiar with the constructs.  The idea is to gray-out the area beneath the loading panel, but it is graying out the entire page.  It eludes me as to why it wasn't causing a problem in VS 2005 and is now.

Any help is much appreciated.
Debbie

[Todd Anglin]

If you're goal is to only gray out the area below your LoadingPanel during an Ajax operation, there is actually a much, much simpler approach. The RadAjaxLoadingPanel provides the ability to automatically provide this effect! For example, based on the code you provided, you use a LoadingPanel like this to achieve the effect you're after without using any custom DIVs or styles:

<telerik:RadAjaxLoadingPanel id="LoadingPanel1" Runat="server" Transparency="25" BackColor="#AAAAAA">
    <b>Loading...</b>
    <br />
    <br />
    <asp:Image id="Image1" runat="server" ImageUrl="~/Resources/Images/ajax-loader.gif" AlternateText="Loading..." >
    </asp:Image>
</telerik:RadAjaxLoadingPanel>

This code will cause the LoadingPanel to comletely cover the element that's being updated with a div that is semi-transparent and a loading image that is 100% opaque on top of the faded background- which I think is what you were trying to do before with the custom code.

Give this a try and let me know if it helps.

-Todd

[Deborah Gregory]

Thanks, Todd.  That does indeed work, however it didn't completely solve the problem because the reason for the UserControl was to compartmentalize the look and feel we wanted so that all pages using the RadAjaxLoadingPanel could simply plug-and-play.  So, I added logic to the OnRender event of the UserControl to locate the RadAjaxLoadingPanel and set the BackColor property.

Thanks for your help in pointing me in the right direction!
Debbie