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
...51525354555657585960...
 Page 52 of 83, items 511 to 520 of 830.
1075811/28/1997 12:00:00 AMRichter SupermarktGenèveSwitzerland
1075911/28/1997 12:00:00 AMAna Trujillo Emparedados y heladosMéxico D.F.Mexico
1076012/1/1997 12:00:00 AMMaison DeweyBruxellesBelgium
1076112/2/1997 12:00:00 AMRattlesnake Canyon GroceryAlbuquerqueUSA
1076212/2/1997 12:00:00 AMFolk och fä HBBräckeSweden
1076312/3/1997 12:00:00 AMFolies gourmandesLilleFrance
1076412/3/1997 12:00:00 AMErnst HandelGrazAustria
1076512/4/1997 12:00:00 AMQUICK-StopCunewaldeGermany
1076612/5/1997 12:00:00 AMOttilies KäseladenKölnGermany
1076712/5/1997 12:00:00 AMSuprêmes délicesCharleroiBelgium

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.GridInXmlHttpPanel.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<!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