RadAjaxLoadingPanel Not Working

[Nathan]

Hello,

I've been unable to get the RadAjaxLoadingPanel to work. I'm using a Master page which contains the RadScriptManager. The content page contains a RadAjaxManager, RadAjaxLoadingPanel, and RadAjaxPanel. I think I'm missing client side code that triggers the Loading Panel to appear and disappear. You can see below, I've set the Ajax Panel "LoadingPanelID" to my loading panel. I also added the RadAjaxManager in attempt to wire up the AjaxPanel & Loading Panel. I also set the Loading Panel to have absolute positioning so I could search for it using the IE developer toolbar. I did find it on the page, but it was hidden (display:none). This is why I'm assuming I'm missing the code to trigger the appearance of the Loading Panel. Suggestions are greatly appreciated.

Thanks!

Content.aspx
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" Transparency="30" ZIndex="9999999" style="position:absolute; left:200px; top:200px;">
        <asp:Label ID="lbl" runat="server" ForeColor="Red">Loading...</asp:Label>
        <asp:Image ID="img" runat="server" Height="40px" Width="40px" ImageUrl="~/images/SpinIndicator.gif" />
    </telerik:RadAjaxLoadingPanel> 


 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" OnAjaxSettingCreating="RadAjaxPanel1_AjaxSettingCreating">
>
>
>



Content.aspx.cs
    protected void RadAjaxPanel1_AjaxSettingCreating(object sender, AjaxSettingCreatingEventArgs e)
    {
        e.UpdatePanel.UpdateMode = UpdatePanelUpdateMode.Always;
    } 

MasterPage.master
- Contains RadScriptManager

[Pavlina]

Hello Nathan,

We highly recommend to avoid working with the RadAjaxManager and RadAjaxPanel controls at the same time. You should use the controls depending on your exact scenario. Refer to the following topics which describe further details about RadAjax in Master/Content page scenarios:

http://www.telerik.com/help/aspnet-ajax/ajax-masterpage.html
http://www.telerik.com/help/aspnet-ajax/ajax-manager-proxy.html

Let us know if this helps and if you need further directions.

Kind regards,
Pavlina
the Telerik team

[Nathan]

I've removed the RADAjaxManager. I only have the ScriptManager in the Master page, the RadAjaxPanel and RadAjaxLoadingPanel is on the content page.

Content.aspx

<

 

telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" Transparency="30" ZIndex="9999999" style="position:absolute; left:200px; top:200px;">

 

<

 

asp:Label ID="lbl" runat="server" ForeColor="Red">Loading...</asp:Label>

</

 

telerik:RadAjaxLoadingPanel>

 

<

 

telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" OnAjaxSettingCreating="RadAjaxPanel1_AjaxSettingCreating">

 

    CONTENT HERE....

</

 

telerik:RadAjaxPanel>

 

** When I click a link that causes an ajax request (postback), the progress indicator (RadAjaxLoadingPanel) does not appear. When I view it in the IE Developer Toolbar, the DISPLAY setting is "NONE". Is there something I'm missing so that it will trigger the appearance of the RadAjaxLoadingPanel on an Ajax Request (regular get/post requests also)?

Thank You!!

[Pavlina]

Hello Nathan,

Attached to this message is a sample runnable application which demonstrates how you can achieve the desired functionality. Please examine it and let me know if you need additional assistance.

Regards,
Pavlina
the Telerik team

[Nathan]

Thanks for your response. This helped me get it to work, but I still have one issue with the loading panel image. When I set EnableSkinTransparency="false", the image appears, but when set to "True" it displays as a blank square in the middle of the page. I thought it was the z-index, but changing this did not help. The problem is that when set to "False", the loading image is also transparent. Any suggestions? I would like for the loading image to appear as normal in the center of the page.

EnableSkinTransparency="false"
** Every loads as expected except the loading image is dimmed like the background. I would like the loading image to appear as normal (not dimmed).

EnableSkinTransparency="true"
** The page dims as expected, but the loading image in the center does not appear. Instead, there is a blank square in the center of the page.
----------------------------------------------------------------------------------------------------
<style type="text/css">
.RadAjax_Default .raDiv   
{
    background-image:url('../../images/loading.gif');
    z-index:99999999;
}

.RadAjax_Default .raColor 
{
    background-color:#8b9162;
}
</style>    

// Setting to True causes blank square instead of image!
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" ZIndex="999999999" Transparency="65" Skin="Default"
EnableSkinTransparency="True">     
</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
         ASP.NET Wizard Control....
</telerik:RadAjaxPanel>
----------------------------------------------------------------------------------------------------

Thanks!

[Nathan]

As previously posted, inside my Ajax panel I have a wizard control. When clicking the Wizard step links it causes the loading panel to appear as expected, but after 10 or so clicks, the loading panel stops working and I'm unable to click the links. If I close the application and restart, it works for about 10 or so clicks. It seems as if all controls that generate ajax requests stop working (like the application can no longer submit ajax requests).

Any suggestions?

[Maria Ilieva]

Hello Nathan,

Regarding the EnableSkinTransparency  problem you are facing with the RadAjaxLoadingPanel I was not able to replicate it locally in a very simple application. Please find the test project attached and let me know what the difference in your case is.
As to the second issue you have about LoadingPanel stops working after several clicks I would suggest you to debug the application and ensure that no error is thrown before this behaviour to appear. Also please ensure that each Ajax request started after the previous one completely finishes.


Kind regards,
Maria Ilieva
the Telerik team

[Nathan]

Can I use the RadAjaxLoadingPanel for pages that are not using Ajax? I would like to show the animation during regular requests as well.

Thanks!

[Maria Ilieva]

Hello Nathan,

Yes, you could use RadAjaxLoadingPanel on regular postbacks by using its client-side show() and hide() methods. Please refer to the following online demo which represents such scenario.
I hope this helps.

All the best,
Maria Ilieva
the Telerik team