New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Explicit Show/Hide

October 2024
October 2024
SMTWTFS
  12345
6789101112
13141516171819
20212223242526
2728293031  
       

Selected Dates:
No Selected Dates to display.

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>
<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