<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowHideLoadingPanel.aspx.cs"
    Inherits="ShowHideLoadingPanel" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">   
           var currentLoadingPanel = null;   
           var currentUpdatedControl = null;   
           function RequestStart(sender, args)   
           {  
               if (args.get_eventTarget() == "DropDownList1")   
                {   
               currentLoadingPanel = $find("RadAjaxLoadingPanel1");   
                
                   currentUpdatedControl = "RadAjaxPanel1";   
                   //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>
        <div>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="RequestStart"
                ClientEvents-OnResponseEnd="ResponseEnd">
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem>Item1</asp:ListItem>
                    <asp:ListItem>Item2</asp:ListItem>
                    <asp:ListItem>Item3</asp:ListItem>
                </asp:DropDownList><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </telerik:RadAjaxPanel>
        </div>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista">
        </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>
