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
...21222324252627282930...
 Page 21 of 83, items 201 to 210 of 830.
104482/17/1997 12:00:00 AMRancho grandeBuenos AiresArgentina
104492/18/1997 12:00:00 AMBlondel père et filsStrasbourgFrance
104502/19/1997 12:00:00 AMVictuailles en stockLyonFrance
104512/19/1997 12:00:00 AMQUICK-StopCunewaldeGermany
104522/20/1997 12:00:00 AMSave-a-lot MarketsBoiseUSA
104532/21/1997 12:00:00 AMAround the HornColchesterUK
104542/21/1997 12:00:00 AMLa maison d'AsieToulouseFrance
104552/24/1997 12:00:00 AMWartian HerkkuOuluFinland
104562/25/1997 12:00:00 AMKöniglich EssenBrandenburgGermany
104572/25/1997 12:00:00 AMKöniglich EssenBrandenburgGermany

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