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 30 of 83, items 291 to 300 of 830.
105385/15/1997 12:00:00 AMB's BeveragesLondonUK
105395/16/1997 12:00:00 AMB's BeveragesLondonUK
105405/19/1997 12:00:00 AMQUICK-StopCunewaldeGermany
105415/19/1997 12:00:00 AMHanari CarnesRio de JaneiroBrazil
105425/20/1997 12:00:00 AMKöniglich EssenBrandenburgGermany
105435/21/1997 12:00:00 AMLILA-SupermercadoBarquisimetoVenezuela
105445/21/1997 12:00:00 AMLonesome Pine RestaurantPortlandUSA
105455/22/1997 12:00:00 AMLazy K Kountry StoreWalla WallaUSA
105465/23/1997 12:00:00 AMVictuailles en stockLyonFrance
105475/23/1997 12:00:00 AMSeven Seas ImportsLondonUK

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