AjaxLoadingPanel - Explicit Show/Hide

December, 2016
December, 2016
SMTWTFS
    123
45678910
11121314151617
18192021222324
25262728293031
       

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?