RadAjaxLoadingPanel not showing

[Vlad]

Hi!

I have a small problem. RadAjaxLoadingPanel does not seem to display itself on an ajax update. Events on the page are triggered as configured. It is just that loading panel never shows. I have also tried disabling CSS, but to no avail.

This is my aspx code:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadAjaxManagerProxy ID="mngrProxy" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Search1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Search1" />
                    <telerik:AjaxUpdatedControl ControlID="ViewMain1" LoadingPanelID="lpnlNormal" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ViewMain1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ViewMain1" LoadingPanelID="lpnlNormal" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel ID="lpnlNormal" runat="server"></telerik:RadAjaxLoadingPanel>
    <div id="divSearch" class="pane pane-left">
        <sid:Search ID="Search1" runat="server" OnSearchStarted="Search1_SearchStarted"></sid:Search>
    </div>
    <div id="divView" class="pane pane-right">
        <sid:ViewMain ID="ViewMain1" runat="server"></sid:ViewMain>
    </div>
    <div class="clear-both" />
</asp:Content>

When I click a button in Search1 control a SearchStarted event is triggered and ViewMain1 control (containing RadGrid) is updated. However, lpnlNormal, never ever shows. Search1 and ViewMain1 are custom controls.

[Viktor Tachev]

Hello Vlad,

You need to apply the 'Skin' property of the RadAjaxLoadingPanel, so it can be displayed.:

<telerik:RadAjaxLoadingPanel ID="lpnlNormal" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>

I am attaching a sample project you can use for reference. I added a label and a button to simulate the behavior of your controls on the page. I have kept your ID and method names.

Kind regards,

Victor Tachev

the Telerik team

[Vlad]

Hi Viktor,

I have tried putting Skin="Default" to RadAjaxLoadingPanel, but to no avail. I then downloaded your web site and it works. However, if I modify any of the two so that the button is in WebUserControl, then it fails again as in my case.

So, my guess would be that either, I failed to do something in WebUserControl or, there is aproblem with RadAjaxLoadingPanel and custom WebUserControls. I am leaning to first though...

[Edit]: Ah... Might have found the problem. If I bind AjaxSetting to button in webUserControl, then it works. But, I don't want that. I would prefer, if my WebUserControl would behave as a normal control.

[Viktor Tachev]

Hi Vlad,

I reproduced the scenario you describe - two WebUserControls where a control in the first WebUserControl updates control in the second WebUserControl. (Check the attached project)

When using WebUserControls you need to have RadAjaxManager in the highest hierarchy level (usually the master page). In your case the ajax events from the different WebUserControl pages should be handled in the master page by the RadAjaxManager.

You could use RadAjaxManagerProxy in some of the WebUserControl if one control updates another control in the same WebUserControl. In the sample project this is demonstrated with the RadGrid. It simulates update on itself.

In the AjaxSettings you should provide the ID of the control initiating the update and the ID of the updated control.
See the code below:

<AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="lpnlNormal" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
</AjaxSettings>

This is from the RadAjaxManager in the master page.
RadButton1 is in WebUserControl called SearchControl. It updates RadGrid1, which is in another WebUserControl called ViewMain. The loading panel is displayed over the updated control.

More information on WebUserControls could be found here and on master page here.
Live demo illustrating user controls and master page could be found here.

Kind regards,

Victor

the Telerik team

[Vlad]

Hi Viktor,

Sorry for late reply. How does this scenario work where you have two or more instances of same web user control on the page?
Isn't there a way to just tie to web user control event?

[Viktor Tachev]

Hi Vlad,

You could have multiple instances of a single web user control in a page. In order for the web user controls to be ajaxified you need to wrap each instance of a web user control  in a Panel control.
You need to place the Panels' ids in RadAjaxManager as UpdatedControls.

I have modified the project with another instance of one of the user controls. You would find it attached as a working example.

You could tie a web user control event and use it to ajaxify the control. However for this approach you would need to implement IPostBackEventHandler interface for the WebUserControl. You would also need to create a custom event.
More information on this interface could be found here.

Let me know if the information provided was helpful to you.

Regards,

Victor Tachev

the Telerik team

[Vlad]

Thank you Victor for your help.