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

WebForms XmlHttpPanel Overview

Country Customers (Callback): Country Customers (WebService): Country Customers (WCF Service):

Country:

Patricio Simpson
Sales Agent

Company Name:

Address:

City:

Country:

Cactus Comidas para llevar

Cerrito 333

Buenos Aires

Argentina

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

About RadXmlHttpPanel for ASP.NET AJAX

Telerik RadXmlHttpPanel is a panel control that serves as a container for rapid content loading. You can place diverse content on the RadXmlHttpPanel: rich user content, user controls or just about anything that could be added on a page. It can be updated with WebServices or ASP.NET CallBack requests and allows you to easily create responsive applications with minimum HTML footprint.

RadXmlHttpPanel and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

Types of loading There are three ways for loading data in the RadXmlHttpPanel. These are: AJAX, Client Callback and WebService
Industry-best cross-browser support Telerik controls support all major browsers Internet Explorer, Firefox, Safari, Opera and Google Chrome
Diverse content You can update diverse content: rich user content, user controls, just about anything that could be added on a page
Search Engine Optimization Telerik controls completely follow the SEO principles by allowing crawlers to follow and index content within the controls
No full page life cycle Any content in the Telerik XmlHTTP panel can be updated quickly without the need of FULL page lifecycle or Viewstate
FREE Training Materials A wealth of supporting resources: documentation, interactive training sessions, KB articles, videos and many more

More about RadXmlHttpPanel for ASP.NET AJAX

<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.Overview.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>
 
<!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" />
    <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 class="divContainerTop">
            <div style="height: 65px;">
                <br />
                <span class="spanTitle" style="left: 20px;">Country Customers (Callback):</span>
                <span class="spanTitle" style="left: 306px;">Country Customers (WebService):</span>
                <span class="spanTitle" style="left: 593px;">Country Customers (WCF Service):</span>
            </div>
            <div>
                <div style="position: absolute; left: 42px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="rcbCallBack" Visible="true" runat="server" OnClientSelectedIndexChanged="telerikDemo.onClientSelectedIndexChanged"
                        DataSourceID="dllDataSource" DataTextField="Country" DataValueField="Country"
                        Width="194px" Height="450px" Skin="Web20">
                        <ItemTemplate>
                            <div>
                                <asp:Image ImageUrl='<%# Eval("Country", "~/Img/Northwind/Countries/Thumbs/{0}.gif") %>'
                                    ID="Image" runat="server" Width="150px" Height="150px" class="country" AlternateText='<%# Eval("Country","{0}.gif") %>'></asp:Image>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
                <div style="position: absolute; left: 328px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="rcbWebService" Visible="true" runat="server" AutoPostBack="False"
                        OnClientSelectedIndexChanged="telerikDemo.onClientSelectedIndexChanged" DataSourceID="dllDataSource"
                        DataTextField="Country" DataValueField="Country" Width="194px" Height="450px"
                        Skin="Web20">
                        <ItemTemplate>
                            <div>
                                <asp:Image ImageUrl='<%# Eval("Country", "~/Img/Northwind/Countries/Thumbs/{0}.gif") %>'
                                    ID="Image" runat="server" Width="150px" Height="150px" class="country" AlternateText='<%# Eval("Country","{0}.gif") %>'></asp:Image>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
                <div style="position: absolute; left: 615px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="rcbWcfService" Visible="true" runat="server" AutoPostBack="False"
                        OnClientSelectedIndexChanged="telerikDemo.onClientSelectedIndexChanged" DataSourceID="dllDataSource"
                        DataTextField="Country" DataValueField="Country" Width="194px" Height="450px"
                        Skin="Web20">
                        <ItemTemplate>
                            <div>
                                <asp:Image ImageUrl='<%# Eval("Country", "~/Img/Northwind/Countries/Thumbs/{0}.gif") %>'
                                    ID="Image" runat="server" Width="150px" Height="150px" class="country" AlternateText='<%# Eval("Country","{0}.gif") %>'></asp:Image>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
            </div>
            <div class="divXmlPanelLeft">
                <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelCB" Value="3" OnClientResponseEnding="telerikDemo.onClientResponseEnding"
                    OnServiceRequest="XmlHttpPanel_ServiceRequest" RenderMode="Block">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <div class="smallUserImage" onclick="telerikDemo.loadUserProfile(this);" style="background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>');">
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </telerik:RadXmlHttpPanel>
                <br />
            </div>
            <div class="divXmlPanelMiddle">
                <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWS" Value="3" OnClientResponseEnding="telerikDemo.onClientResponseEnding"
                    WebMethodPath="XmlHttpPanelWebService.asmx" WebMethodName="GetCustomersByCountryXmlHttpPanel"
                    RenderMode="Block">
                </telerik:RadXmlHttpPanel>
            </div>
            <div class="divXmlPanelRight">
                <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWCF" Value="{&quot;country&quot;:&quot;Argentina&quot;}"
                    OnClientResponseEnding="telerikDemo.onClientResponseEnding" WcfServicePath="XmlHttpPanelWcfService.svc"
                    WcfServiceMethod="GetCustomersByCountry" WcfRequestMethod="POST" RenderMode="Block">
                </telerik:RadXmlHttpPanel>
            </div>
        </div>
        <div class="divContainerBottom">
            <telerik:RadXmlHttpPanel runat="server" Height="240px" ID="RadXmlHttpPanelInfoCustomer"
                Value="3" OnServiceRequest="RadXmlHttpPanelInfoCustomer_ServiceRequest" RenderMode="Block"
                CssClass="xmlPanelCustomerInfo">
                <asp:Repeater ID="RepeaterCustomerInfo" runat="server">
                    <ItemTemplate>
                        <div class="classImg" style="background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/{0}.jpg") %>');">
                        </div>
                        <div style="float: left;">
                            <br />
                            <br />
                            <asp:Label CssClass="info" ID="Name" runat="server" Font-Size="X-Large" ForeColor="#5281ce"><%# Eval("ContactName") %></asp:Label><br />
                            <asp:Label CssClass="info" ID="Label1" runat="server" ForeColor="#5281ce"><%# Eval("ContactTitle")%></asp:Label><br />
                            <br />
                            <div style="text-align: right; float: left;">
                                <span class='title'>Company Name:</span>
                                <br />
                                <br />
                                <span class='title'>Address:</span>
                                <br />
                                <br />
                                <span class='title'>City:</span>
                                <br />
                                <br />
                                <span class='title'>Country:</span>
                                <br />
                                <br />
                            </div>
                            <div style="float: left; margin-left: 5px;">
                                <asp:Label CssClass="info" ID="cName" runat="server"><%# Eval("CompanyName")%></asp:Label>
                                <br />
                                <br />
                                <asp:Label CssClass="info" ID="Label2" runat="server"><%# Eval("Address")%></asp:Label>
                                <br />
                                <br />
                                <asp:Label CssClass="info" ID="Label3" runat="server"><%# Eval("City")%></asp:Label>
                                <br />
                                <br />
                                <asp:Label CssClass="info" ID="Label4" runat="server"><%# Eval("Country")%></asp:Label>
                                <br />
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </telerik:RadXmlHttpPanel>
        </div>
    </div>
    <asp:SqlDataSource ID="dllDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT DISTINCT TOP 12 Country FROM [Customers]"></asp:SqlDataSource>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function() {
                telerikDemo.rcbWebService = $find("<%= rcbWebService.ClientID %>");
                telerikDemo.xmlHttpPanelWS = $find("<%=XmlHttpPanelWS.ClientID %>");
                telerikDemo.rcbCallBack =  $find("<%= rcbCallBack.ClientID %>");
                telerikDemo.xmlHttpPanelCB = $find("<%=XmlHttpPanelCB.ClientID %>");
                telerikDemo.rcbWcfService = $find("<%= rcbWcfService.ClientID %>");
                telerikDemo.xmlHttpPanelWCF = $find("<%=XmlHttpPanelWCF.ClientID %>");
                telerikDemo.radXmlHttpPanelInfoCustomer = $find("<%= RadXmlHttpPanelInfoCustomer.ClientID %>");
 
            });
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support