Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Grid / Virtual Scrolling with Client-Side Binding

Virtual scrolling and paging with client-side databinding:
  • Drag the vertical scroll and release it to navigate to the desired page
IDProduct NameQuantity Per UnitUnit PriceUnits In Stock
     
     
     
     
     
     
     
     
     
     
     
     
     
     
 Page 1 of 2, items 1 to 14 of 15.

Yahoo-style scrolling with client-side databinding:
  • Drag the vertical scroll to the bottom to load additional records on demand
IDCustomerIDOrder DateShip NameShip CityShip Country
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

  • RadGrid supports virtual scrolling and paging with client-side binding. Similarly to Virtual scroll-paging with server-side binding, you need to set RadGrid.ClientSettings.Scrolling.EnableVirtualScrollPaging = true. You can then use the scroll bar to dynamically scroll to a specified page and have RadGrid automatically request the data and rebind. For more information on the client-side databinding capabilities of RadGrid, refer to the RadGrid demos on declarative and programmatic client binding

    Following is a list of most notable differences between virtual scroll paging with client and server binding

    Server binding Client binding Description
    AllowCustomPaging Required Not Required With client binding, paging is always delegated to the web method and RadGrid expects the correct page of data
    VirtualItemCount Required Conditionally Required If you specify a select count method in RadGrid's client binding settings, the VirtualItemCount property is not required. If RadGrid cannot dynamically fetch the maximum row count (no select count method provided), you need to specify VirtualItemCount
    ClientSettings. Scrolling. SaveScrollPosition Required Not Required Required with server-binding, so that RadGrid can restore the last scrolled position. Not required width client binding, as the last scroll position is not modifed after client data binding

    The second RadGrid example demonstrates the yahoo-style paging equivalent with client binding. When the scroll reaches the bottom, a request is triggered to provide extra records in the table. Additional data will be supplied as long as the rendered rows are less than the entire source records count, determined by RadGrid's VirtualItemCount property and/or the SelectCountMethod in the client binding settings.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.AJAX.VirtualScrollPagingClientBinding.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <style type="text/css">
            .desctable
            {
                border-collapse:collapse;
            }
            
            .desctable td, .desctable th
            {
                padding:3px 5px;
                border: 1px solid #94D3D9
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true" />
        <!-- content start -->
        
        <div class="bigModule">
            <div class="bigModuleBottom">
                <span class="title">Virtual scrolling and paging with client-side databinding:</span>
                <ul>
                    <li>Drag the vertical scroll and release it to navigate to the desired page</li>
                </ul>
            </div>
        </div>
        
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>
        
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
            //<![CDATA[

                function pageLoad(sender, args)
                {
                    toggleLoadingPanel("<%= RadGrid1.ClientID %>", true);
                    toggleLoadingPanel("<%= RadGrid2.ClientID %>", true);
                }

                function showLoadingPanel(sender, args)
                {
                    toggleLoadingPanel(sender.get_id(), true);
                }

                function hideLoadingPanel(sender, args)
                {
                    toggleLoadingPanel(sender.get_id(), false);
                }

                function toggleLoadingPanel(elementId, show)
                {
                    var loadingPanel = $find("LoadingPanel");
                    if (show)
                    {
                        loadingPanel.show(elementId);
                    }
                    else
                    {
                        loadingPanel.hide(elementId);
                    }
                }
            
                function handleScrolling(sender, args)
                {
                    //check if the items are scrolled to bottom and get additional items
                    if (args.get_isOnBottom())
                    {
                        var master = sender.get_masterTableView();
                        if (master.get_pageSize() < master.get_virtualItemCount())
                        {
                            //changing page size causes automatic rebind
                            master.set_pageSize(master.get_pageSize() + 20);
                        }
                    }
                }
                //]]>

            </script>

        </telerik:RadCodeBlock>
        
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" PageSize="14" AutoGenerateColumns="false">
            <PagerStyle Mode="NumericPages" />
            <MasterTableView TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID" />
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="Product Name" HeaderStyle-Width="250px" />
                    <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity Per Unit" />
                    <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="Unit Price" DataFormatString="{0:C2}" />
                    <telerik:GridBoundColumn DataField="UnitsInStock" HeaderText="Units In Stock" />
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True">
                </Scrolling>
                <DataBinding Location="defaultcs.aspx" SelectMethod="GetProductData" SelectCountMethod="GetProductCount"
                    StartRowIndexParameterName="startRowIndex" MaximumRowsParameterName="maxRows" />
                <ClientEvents
                    OnCommand="showLoadingPanel"
                    OnDataBound="hideLoadingPanel" />
            </ClientSettings>
        </telerik:RadGrid>
        
        <br />
        <hr />
        
        <div class="bigModule">
            <div class="bigModuleBottom">
                <span class="title">Yahoo-style scrolling with client-side databinding:</span>
                <ul>
                    <li>Drag the vertical scroll to the bottom to load additional records on demand</li>
                </ul>
            </div>
        </div>
        
        <telerik:RadGrid ID="RadGrid2" runat="server" AllowPaging="true" PageSize="20">
            <PagerStyle Visible="false" />
            <MasterTableView TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID" />
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" />
                    <telerik:GridBoundColumn DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:d}" />
                    <telerik:GridBoundColumn DataField="ShipName" HeaderText="Ship Name" />
                    <telerik:GridBoundColumn DataField="ShipCity" HeaderText="Ship City" />
                    <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="Ship Country" />
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                <ClientEvents
                    OnScroll="handleScrolling"
                    OnCommand="showLoadingPanel"
                    OnDataBound="hideLoadingPanel" />
                <DataBinding Location="defaultcs.aspx" SelectMethod="GetOrderData" SelectCountMethod="GetOrderCount"
                    StartRowIndexParameterName="startRowIndex" MaximumRowsParameterName="maxRows" />
            </ClientSettings>
        </telerik:RadGrid>
        
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451