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

Using LoadingPanelID

  • Argentina
  • Austria
  • Belgium
  • Brazil
  • Canada
  • Denmark
  • Finland
  • France
  • Germany
  • Ireland
  • Italy
  • Mexico
  • Norway
  • Poland
  • Portugal
  • Spain
  • Sweden
  • Switzerland
  • UK
  • USA
  • Venezuela


Patricio Simpson
Sales Agent


Address:
Cerrito 333

City:
Buenos Aires

Country:
Argentina

The LoadingPanelID property of RadXmlHttpPanel allows it to be hooked to a RadAjaxLoadingPanel, which will overlap the panel for the duration of the request. This could be used for requests that are expected to take some time to process on the server-side. For demonstration purposes in this example, Thread.Sleep is used in the in the XmlHttpPanel_ServiceRequest event on the server.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.AjaxLoadingPanelID.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div style="height: 62px; background: url('images/head_back.png') no-repeat;">
        </div>
        <div class="divContainer">
            <div class="divTreeView" style="">
                <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" Width="200px" OnClientNodeClicked="telerikDemo.onClientNodeClicked"
                    OnClientLoad="telerikDemo.onClientLoad" OnNodeExpand="RadTreeView1_NodeExpand" Skin="Office2007">
                </telerik:RadTreeView>
            </div>
            <div class="divXmlPanel">
                <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
                    Value="CACTU" OnServiceRequest="XmlHttpPanel_ServiceRequest" Height="267px" Width="548px"
                    RenderMode="Block">
                    <br />
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <div style="float: left; width: 340px; position: relative; left: 30px;">
                                <br />
                                <asp:Label CssClass="info" ID="Name" runat="server" Style="font-size: x-large; line-height: 1.5em;"><%# Eval("ContactName") %></asp:Label><br />
                                <asp:Label CssClass="info" ID="Label1" runat="server"><%# Eval("ContactTitle")%></asp:Label>
                                <br />
                                <br />
                                <br />
                                <span class='title'>Address:</span><br />
                                <asp:Label CssClass="info" ID="Label2" runat="server"><%# Eval("Address")%></asp:Label><br />
                                <br />
                                <span class='title'>City:</span><br />
                                <asp:Label CssClass="info" ID="Label3" runat="server"><%# Eval("City")%></asp:Label><br />
                                <br />
                                <span class='title'>Country:</span><br />
                                <asp:Label CssClass="info" ID="Label4" runat="server"><%# Eval("Country")%></asp:Label><br />
                                <br />
                            </div>
                            <div style="position: relative; top: 7px; float: left; border: 1px solid #999999; margin-right: 10px; width: 180px; height: 220px; background-position: center; background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/{0}.jpg") %>');">
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </telerik:RadXmlHttpPanel>
            </div>
        </div>
        <div style="height: 31px; background: url('images/foot_back.png') no-repeat;">
        </div>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Office2007">
        </telerik:RadAjaxLoadingPanel>
    </div>
    <script type="text/javascript">
        Sys.Application.add_load(function() {
            telerikDemo.radXmlHttpPanel1 = $find("<%=RadXmlHttpPanel1.ClientID%>");
        });
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance