Client-side loading
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.
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.ClientSideContentLoad.DefaultCS" CodeFile="DefaultCS.aspx.cs" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %><%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %><%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %><%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <qsf:HeadTag ID="Headtag1" runat="server" /> <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> function rowSelected(sender, args) { var key = args.getDataKeyValue("CustomerID"); var panel = $find("<%=RadXmlHttpPanel1.ClientID %>"); panel.set_value(key); } </script> </telerik:RadScriptBlock> <style type="text/css"> .divContainer { background: url('main_back.png') no-repeat; width: 100%; height: 400px; position: relative; } .divGrid, .divXmlHttpPanel { position: absolute; top: 86px; } .divXmlHttpPanel { top: 132px; left: 390px; } .rgInfoPart { display: none !important; } .title { font-size: 12px; color: #606060; } .info { color: black; font-size: 12px; } </style></head><body class="BODY"> <form id="Form2" method="post" runat="server"> <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" /> <asp:ScriptManager ID="ScriptManager" runat="server" /> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadGrid1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Hay"> </telerik:RadAjaxLoadingPanel> <div class="divContainer"> <div class="divGrid"> <telerik:RadGrid ID="RadGrid1" Skin="Hay" OnNeedDataSource="RadGrid1_NeedDataSource" Width="370px" AllowSorting="True" PageSize="10" 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" /> <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" ClientEvents-OnRowSelected="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> <div style="float: left; border: 1px solid #999999; margin-right: 15px; width: 180px; height: 220px; background-position: center; background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/{0}.jpg") %>');"> </div> <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> <qsf:Footer runat="server" ID="Footer1" ShowCodeViewer="true" /> </form></body></html>
Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.
Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.
If you have any questions, do not hesitate to contact us at sales@telerik.com.