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

Initiating content load client-side

NameAddress
Page 1 of 12
 Item 1 to 8 of 91
Maria AndersObere Str. 57
Ana TrujilloAvda. de la Constitución 2222
Antonio MorenoMataderos 2312
Thomas Hardy120 Hanover Sq.
Christina BerglundBerguvsvägen 8
Hanna MoosForsterstr. 57
Frédérique Citeaux24, place Kléber
Martín SommerC/ Araquil, 67
FRANR



Carine Schmitt
Marketing Manager


Company Name:

Address:

City:

France restauration

54, rue Royale
Nantes France

This example demonstrates how to load content on the page using RadXmlHttpPanel, as an alternative to, for example, RadAjaxPanel. The RadXmlHttpPanel's panel is able to provide better performance because, unlike AJAX, ASP.NET Callbacks do not go through the entire page lifecycle, but only through a small part of it.

The data, returned from the server is also significantly smaller than the typical AJAX response - it is the data needed to update the content of the RadXmlHttpPanel only. No hidden variables, such as the ViewState content, are returned.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.ClientSideContentLoad.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">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Telerik">
        </telerik:RadAjaxLoadingPanel>
        <div class="divContainer">
            <div class="divGrid">
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" Skin="Telerik" OnNeedDataSource="RadGrid1_NeedDataSource"
                    Width="370px" AllowSorting="True" PageSize="8" AllowPaging="True" runat="server"
                    AutoGenerateColumns="false" GridLines="None">
                    <MasterTableView ClientDataKeyNames="CustomerID" Width="100%" Summary="RadGrid table">
                        <Columns>
                            <telerik:GridBoundColumn DataField="CustomerID" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Name" DataField="ContactName" UniqueName="ContactName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Address" DataField="Address" UniqueName="Address">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <PagerStyle Mode="Slider" PageButtonCount="5"></PagerStyle>
                    <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" ClientEvents-OnRowSelected="telerikDemo.rowSelected">
                    </ClientSettings>
                </telerik:RadGrid>
            </div>
            <div class="divXmlHttpPanel">
                <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" Value="FRANR" OnServiceRequest="XmlHttpPanel_ServiceRequest"
                    RenderMode="Block">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <img src="<%# Eval("CustomerID", "../../../Img/Northwind/Customers/{0}.jpg") %>" alt="<%# Eval("CustomerID") %>" class="person-photo" />
                            <div style="float: left;">
                                <br />
                                <br />
                                <br />
                                <div style="text-align: center;">
                                    <asp:Label CssClass="info" ID="Name" runat="server" Style="font-size: x-large;">
                                    <%# Eval("ContactName") %></asp:Label><br />
                                    <asp:Label CssClass="info" ID="Label1" runat="server"><%# Eval("ContactTitle")%></asp:Label>
                                </div>
                                <br />
                                <br />
                                <div style="float: left; text-align: right;">
                                    <span class="title">Company Name:</span><br />
                                    <br />
                                    <span class="title">Address:</span><br />
                                    <br />
                                    <span class="title">City:</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" Height="30px" Width="195px"><%# Eval("Address")%></asp:Label>
                                    <br />
                                    <asp:Label CssClass="info" ID="Label3" runat="server"><%# Eval("City")%></asp:Label>
                                    <asp:Label CssClass="info" ID="Label4" runat="server"><%# Eval("Country")%></asp:Label>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </telerik:RadXmlHttpPanel>
            </div>
        </div>
    </div>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function() {
                telerikDemo.radXmlHttpPanel1 = $find("<%=RadXmlHttpPanel1.ClientID %>");
            });
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance