When working with large data sets it is convenient to use the paging mechanism of Telerik RadGrid. However, for really huge datasets crawling through pages using only the grid pager may become a hard and boring task. For such scenarios Telerik RadGrid gives you the Virtual scrolling/paging functionality. 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".
| ASPX/ASCX |
 Copy Code |
|
<rad:radgrid id="RadGrid1" Width="95%" EnableAJAXLoadingTemplate="True" EnableAJAX="True"
allowsorting="True" pagesize="50" showfooter="True" showgrouppanel="True" allowpaging="True"
runat="server">
<clientsettings allowdragtogroup="True" allowcolumnsreorder="True" reordercolumnsonclient="True">
<resizing allowrowresize="true" allowcolumnresize="True" enablerealtimeresize="True"></resizing>
<scrolling allowscroll="True" enableajaxscrollpaging= "True" usestaticheaders="True" savescrollposition="True"></scrolling>
</clientsettings>
</rad:radgrid> |
 |
To reset the scroll position in case you reduce the records in the grid at some stage of the lifecycle, you can set the ClientSettings -> Scrolling -> AJAXScrollTop property of the grid to true. |
Moreover, you can also choose to perform google-style scrolling when dragging the vertical grid scroll. This is attained with a few lines of javascrtipt/server code. 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:
Below is the code from the online demo (which can be viewed here):
| ASPX/ASCX |
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>
<rad:RadGrid ID="RadGrid2" Skin="Classic" DataSourceID="AccessDataSource1" AllowSorting="True"
EnableAJAX="true" EnableAJAXLoadingTemplate="true" LoadingTemplateTransparency="20"
runat="server" AllowPaging="true" PageSize="20">
<PagerStyle Visible="false" />
<MasterTableView Width="100%" />
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
<ClientEvents OnScroll="HandleScrolling" />
</ClientSettings>
</rad:RadGrid>
<br />
<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb"
SelectCommand="SELECT CompanyName, ContactName, ContactTitle, Address, City FROM Customers"
runat="server" /> |
| 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 |