Display RadAjaxLoadingPanel on more than asp:panel on the same page

[AAA]

Is it possible to display the RadAjaxLoadingPanel on more than one control on the same page?

In my project, I have an asp:panel called pnlContent and the html code is:  

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
            </UpdatedControls>
        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="btnVerifyUser">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" LoadingPanelID="RadAjaxLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="btnAssignUserToGroup">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
            </UpdatedControls>
        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="btnProcessExcel">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess" LoadingPanelID="RadAjaxLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnVerifyExcelRecords">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess" LoadingPanelID="RadAjaxLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

I can see the LoadingPanel in pnlContent, when btnAssignUserToGroup is clicked, but I can't see it in pnlExcelProcess.

How can I see the LoadingPanel when btnVerifyExcelRecords or btnProcessExcel is clicked?

[Princy]

Hi AAA,

Please try to set the LoadingPanelID of 'btnAssignUserToGroup' to 'RadAjaxLoading' and AjaxUpdatedControl ID to 'pnlExcelProcess'. Please have a look into the complete code snippet which works fine at my end.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnVerifyUser">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" LoadingPanelID="RadAjaxLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnAssignUserToGroup">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess" LoadingPanelID="RadAjaxLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnProcessExcel">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess" LoadingPanelID="RadAjaxLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnVerifyExcelRecords">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess" LoadingPanelID="RadAjaxLoading" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoading" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadButton ID="btnVerifyUser" runat="server" Text="btnVerifyUser" OnClick="btnVerifyUser_Click">
</telerik:RadButton>
<asp:Panel ID="pnlContent" runat="server" Height="50px">
    pnlContent
</asp:Panel>
<telerik:RadButton ID="btnProcessExcel" runat="server" Text="btnProcessExcel" OnClick="btnProcessExcel_Click">
</telerik:RadButton>
<asp:Panel ID="pnlExcelProcess" runat="server" Height="50px">
    pnlExcelProcess
</asp:Panel>
<telerik:RadButton ID="btnVerifyExcelRecords" runat="server" Text="btnVerifyExcelRecords"
    OnClick="btnVerifyExcelRecords_Click">
</telerik:RadButton>
<br />
<telerik:RadButton ID="btnAssignUserToGroup" runat="server" Text="btnAssignUserToGroup"
    OnClick="btnAssignUserToGroup_Click">
</telerik:RadButton>

Thanks,
Princy.

[AAA]

Princy, thanks for your response. I think your code works, but only in IE. It does not work i Chrome or Firefox.

[Maria Ilieva]

Hi,

Try setting the LoadingPanel as DefaultLoadingPanelID for all RadAjaxManager settings like this:

<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoading" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnVerifyUser">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlContent" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnAssignUserToGroup">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnProcessExcel">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnVerifyExcelRecords">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlExcelProcess"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoading" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>

Regards,
Maria Ilieva
Telerik

[AAA]

Maria, I still cannot see it in Chrome.

[Maria Ilieva]

Hello,

Can you please try to specify width and height for the updated Panels on the page and verify if this helps?

Regards,
Maria Ilieva
Telerik

[AAA]

Maria, that did not help :(

[Maria Ilieva]

Hello,

In case non of the previous provided suggestions help I would suggest you to try show and hide the RadAjaxLoadingPanel manually on the client. See the help topic below for more information on this matter:
http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

Regards,
Maria Ilieva
Telerik