RadGrid for ASP.NET
Contents
  • At a glance
  • Installation and deployment
  • DNN
  • Licensing
  • Already using the control
  • Functional overview
  • ASP.NET 2.0 Features
  • Getting Started
  • Grid columns
  • Grid rows
  • Defining Structure
  • Visible/Enabled conventions
  • Populating the control with data
  • AJAX
  • Sorting
  • Paging
  • Scrolling
  • Grouping
  • Filtering
  • Selecting grid items
  • Insert/Update/Delete records
  • Hierarchical grid types and Load modes
  • Design-time support
  • Controlling visual appearance
  • Localization/Accessibility
  • RadGrid export
  • The control lifecycle
  • Performance tips and tricks
  • Getting familiar with server-side API
  • Getting familiar with client-side API
  • Telerik RadGrid inheritance
  • How-to
  • Troubleshooting
  • Integration with other controls
  • Client-side API Reference
  • API Reference
  • Need for help
Virtual Scrolling Send comments on this topic.
See Also
Scrolling > Virtual Scrolling

Glossary Item Box

Virtual scrolling is part of the AJAX capabilities in Telerik RadGrid. Using the grid scrollbar, you can change the grid pages just like in Microsoft Word®. When scrolling with the virtual scrollbar, Telerik RadGrid uses AJAX requests to change the pages, i.e. no Postbacks are performed. The overall behavior is smooth and with no flicker.

In order to enable virtual scrolling/paging for large record sets browsing use the ClientSettings.Scrolling.EnableAJAXScrollPaging property of Telerik RadGrid .

Note that you should have AJAX enabled for Telerik RadGrid by setting the EnableAJAX="True".

Virtual Paging/Scrolling

The second grid in the relevant online demo represents how to perform google-style scrolling when dragging the vertical grid scroll. When the scroll reaches the bottom, an ajax 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.

Yahoo-style scroll


ASPX Copy Code
<script type="text/javascript">
            function HandleScrolling(e)
           {
             var grid = window["<%=RadGrid2.ClientID %>"];
             var scrollArea = document.getElementById("<%= RadGrid2.ClientID %>" + "_GridData");

              if(IsScrolledToBottom(scrollArea))
             {
               var currentlyDisplayedRecords = grid.MasterTableView.PageSize * (grid.MasterTableView.CurrentPageIndex + 1);

               //if the presently visible items are less than the entire source records count
               //trigger an ajax request to increase them
                if(currentlyDisplayedRecords < 100)
               {
                 window[ "<%= RadGrid2.ClientID %>"].AjaxRequest("<%= RadGrid2.UniqueID %>", "LoadMoreRecords");
               }
             }
           }
           //this method calculates whether you have reached the bottom when dragging the vertical grid scroll
            function IsScrolledToBottom(scrollArea)
           {
               var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;
                return currentPosition == scrollArea.scrollHeight;
           }
</script>


C# Copy Code
protected override void RaisePostBackEvent(System.Web.UI.IPostBackEventHandler source, string eventArgument)
{
           base.RaisePostBackEvent(source, eventArgument);
            if(source == this.RadGrid2 && eventArgument == "LoadMoreRecords")
           {
               RadGrid2.PageSize = 10 + RadGrid2.PageSize;
               RadGrid2.Rebind();
           }
}
VB.NET Copy Code
Protected Overloads Overrides Sub RaisePostBackEvent(ByVal source As System.Web.UI.IPostBackEventHandler, ByVal eventArgument As String)
            MyBase.RaisePostBackEvent(source, eventArgument)
            If source Is Me.RadGrid2 AndAlso eventArgument = "LoadMoreRecords" Then
                RadGrid2.PageSize = 10 + RadGrid2.PageSize
                RadGrid2.Rebind()
            End If
End Sub

See Also