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 24 of 83, items 231 to 240 of 830.
104783/18/1997 12:00:00 AMVictuailles en stockLyonFrance
104793/19/1997 12:00:00 AMRattlesnake Canyon GroceryAlbuquerqueUSA
104803/20/1997 12:00:00 AMFolies gourmandesLilleFrance
104813/20/1997 12:00:00 AMRicardo AdocicadosRio de JaneiroBrazil
104823/21/1997 12:00:00 AMLazy K Kountry StoreWalla WallaUSA
104833/24/1997 12:00:00 AMWhite Clover MarketsSeattleUSA
104843/24/1997 12:00:00 AMB's BeveragesLondonUK
104853/25/1997 12:00:00 AMLINO-DelicatesesI. de MargaritaVenezuela
104863/26/1997 12:00:00 AMHILARION-AbastosSan CristóbalVenezuela
104873/26/1997 12:00:00 AMQueen CozinhaSao PauloBrazil

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