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

Using RadXmlHttpPanel with RadAjaxPanel

Customers by Countries
Order IDOrder DateShip NameShip CityShip Country
...11121314151617181920...
 Page 20 of 83, items 191 to 200 of 830.
104382/6/1997 12:00:00 AMToms SpezialitätenMünsterGermany
104392/7/1997 12:00:00 AMMère PaillardeMontréalCanada
104402/10/1997 12:00:00 AMSave-a-lot MarketsBoiseUSA
104412/10/1997 12:00:00 AMOld World DelicatessenAnchorageUSA
104422/11/1997 12:00:00 AMErnst HandelGrazAustria
104432/12/1997 12:00:00 AMReggiani CaseificiReggio EmiliaItaly
104442/12/1997 12:00:00 AMBerglunds snabbköpLuleåSweden
104452/13/1997 12:00:00 AMBerglunds snabbköpLuleåSweden
104462/14/1997 12:00:00 AMToms SpezialitätenMünsterGermany
104472/14/1997 12:00:00 AMRicardo AdocicadosRio de JaneiroBrazil

The following example demonstrates how to benefit by using the RadAjaxPanel combined with the RadXmlHttpPanel.

A RadGrid is hosted in a RadXmlHttpPanel, and the RadXmlHttpPanel itself is wrapped by a RadAjaxPanel. The RadXmlHttpPanel populates the RadGrid by loading on-demand content, while the RadAjaxPanel ensures that all of the (RadGrid's) events are fired correctly and trigger Ajax partial updates. This way we have optimum performance and take full advantage of what each panel does best.

Note: RadGrid's Insert/Update/Delete operations are not supported in this scenario (RadXmlHttpPanel in RadAjaxPanel), because they rely heavily on the ViewState. Since the ViewState is not updated on ASP.NET client callbacks, on the next row Insert/Update/Delete the incorrect row will be affected, and this will cause data inconsistency. That's why this setup should be used in simpler scenarios, where the ViewState is not that important.

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

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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">
        <div style="margin-bottom: 10px;">
            <span style="margin-right: 15px;">Customers by Countries</span>
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="telerikDemo.setValue"
                AllowCustomText="true" Filter="Contains" DataSourceID="SqlDataSource1" DataTextField="Country" EmptyMessage="Choose a country..."
                Style="">
            </telerik:RadComboBox>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT DISTINCT [Country] FROM [Customers] Order By [Country]"></asp:SqlDataSource>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" EnableClientScriptEvaluation="true"
                OnServiceRequest="XmlHttpPanel1_ServiceRequest" RenderMode="Block">
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
                    Width="100%" AllowSorting="True" PageSize="10" AllowPaging="True" AllowMultiRowSelection="True"
                    GridLines="None">
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                </telerik:RadGrid>
            </telerik:RadXmlHttpPanel>
        </telerik:RadAjaxPanel>
    </div>
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function() {
                telerikDemo.radXmlHttpPanel = $find("<%=RadXmlHttpPanel1.ClientID %>");
            });
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance