AjaxLoadingPanel - Explicit Show/Hide

May, 2017
May, 2017
SMTWTFS
 123456
78910111213
14151617181920
21222324252627
28293031   
       

Selected Dates:
No Selected Dates to display.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how you can use the RadAjaxLoadingPanel client-side API to show and hide the loading panel explicitly. You can display the loading panel over an element that is either the updated control or any other desired control.

Select a calendar date to see how RadAjaxLoadingPanel is visible over the calendar only. Click the Clear Selected Dates button to display the RadAjaxLoadingPanel over the whole form.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AjaxLoadingPanel.ExplicitShowHide.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            var btn1 = $find("<%= Button1.ClientID%>");

            function requestStart(sender, args) {
                currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID%>");
                btn1 = $find("<%= Button1.ClientID%>");

                if (args.get_eventTarget() == "<%= RadCalendar1.UniqueID %>") {
                    btn1.set_enabled(false);
                    currentUpdatedControl = "<%= RadCalendar1.ClientID %>";
                    //show the loading panel over the updated control   
                    currentLoadingPanel.show(currentUpdatedControl);
                }
                if (args.get_eventTarget() == "<%= Button1.UniqueID %>") {
                    currentUpdatedControl = "<%= Panel1.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;
                if (!btn1.get_enabled()) {
                    btn1.set_enabled(true);
                }
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" UpdatePanelCssClass="inlinePanel"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" UpdatePanelCssClass="inlinePanel"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="requestStart" OnResponseEnd="responseEnd"></ClientEvents>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-container size-narrow">
        <asp:Panel ID="Panel1" runat="server">
            <div class="contentWrapper">
                <div class="calendarContainer">
                    <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" AutoPostBack="true" ShowOtherMonthsDays="false"
                        OnSelectionChanged="RadCalendar1_SelectionChanged" UseColumnHeadersAsSelectors="false"
                        UseRowHeadersAsSelectors="false" ShowRowHeaders="false">
                    </telerik:RadCalendar>
                    <br />
                    <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" OnClick="Button1_Click" Text="Clear Selected Dates" CssClass="clearBtn">
                    </telerik:RadButton>
                </div>
                <div class="datesContainer">
                    <fieldset class="module1">
                        <legend>Selected Dates:</legend>
                        <br />
                        <asp:Label ID="Label1" runat="server" Text="No Selected Dates to display." CssClass="label"></asp:Label>
                    </fieldset>
                </div>
            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?