Edit this page

Show and Hide AjaxLoadingPanel explicitly

To display the loading panel over an element, just call the Show method client-side. This allows you to conditionally display loading panel over updated control (Show the panel in OnRequestStart, and hide it in OnResponseEnd calling the Hide client-side method):

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;
    function RequestStart(sender, args) {
         currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

            if (args.get_eventTarget() == "<%= Button1.UniqueID %>") {
                currentUpdatedControl = "<%= Panel1.ClientID %>";
            }
              else {
                 currentUpdatedControl = "<%= Panel2.ClientID %>";
            }
         //show the loading panel over the updated control
            currentLoadingPanel.show(currentUpdatedControl);
                }
        function ResponseEnd() {
            //hide the loading panel and clean up the global variables
            if (currentLoadingPanel != null)
            currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
                }
    </script>
</telerik:RadCodeBlock>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server" Width="200px">
            Panel 1
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Width="200px">
            Panel 2
</asp:Panel>

Note that you can also hide the LoadingPanel by using the hideLoadingPanels() method of the RadAjaxManager/RadAjaxPanel like this:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;

        function ResponseEnd() {
        ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            //hide the loading panel without knowing the updated control
            if (currentLoadingPanel != null)
            ajaxManager.hideLoadingPanels();
                }
    </script>
</telerik:RadCodeBlock>

See Also