I implemented the second type of virtual scrolling on the following page.
http://www.telerik.com/help/aspnet-ajax/grid-virtual-scrolling.html
I created a more flexible implementation while adding 100% height functionality.
<!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"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
html, body, form
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
/>
<
script
type
=
"text/javascript"
>
var activeGrid;
function RadGrid1_OnGridCreated(sender, e) {
activeGrid = sender;
RadGrid1_Resize();
}
function RadGrid1_Resize() {
setTimeout(function () {
if (!activeGrid) return;
var scrollDiv = activeGrid.GridDataDiv;
if (scrollDiv) {
var scrollHeight = document.body.offsetHeight - scrollDiv.offsetTop;
var footer = activeGrid.GridFooterDiv;
if (footer) {
scrollHeight -= footer.offsetHeight;
}
var pager = activeGrid.PagerControl;
if (pager) {
scrollHeight -= pager.offsetHeight;
}
scrollDiv.style.height = scrollHeight - 2 + "px";
}
}, 0);
}
window.onresize = window.onload = RadGrid1_Resize;
function RadGrid1_OnScroll(sender, eventArgs) {
if (eventArgs.isOnBottom) {
var masterTableView = sender.MasterTableView;
if (masterTableView.PageSize * (masterTableView.CurrentPageIndex + 1) <
masterTableView.get_virtualItemCount
()) {
masterTableView.fireCommand("PageSizeIncrease", "50");
}
}
}
</script>
test
<
div
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
Height
=
"100%"
PageSize
=
"50"
AllowPaging
=
"True"
AllowCustomPaging
=
"true"
>
<
MasterTableView
Width
=
"100%"
/>
<
PagerStyle
Visible
=
"false"
/>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
/>
<
ClientEvents
OnGridCreated
=
"RadGrid1_OnGridCreated"
OnScroll
=
"RadGrid1_OnScroll"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
</
div
>
</
form
>
</
body
>
</
html
>
Private
Sub
RadGrid1_ItemCommand(
ByVal
sender
As
Object
,
ByVal
e
As
Telerik.Web.UI.GridCommandEventArgs)
Handles
RadGrid1.ItemCommand
Select
e.CommandName
Case
"PageSizeIncrease"
RadGrid1.PageSize += e.CommandArgument
RadGrid1.Rebind()
End
Select
End
Sub
Private
Sub
RadGrid1_NeedDataSource(
ByVal
sender
As
Object
,
ByVal
e
As
Telerik.Web.UI.GridNeedDataSourceEventArgs)
Handles
RadGrid1.NeedDataSource
Dim
Table
As
New
DataTable
Table.Columns.Add(
New
DataColumn(
"Id"
,
GetType
(
Integer
)))
Dim
nStart
As
Integer
= (RadGrid1.CurrentPageIndex * RadGrid1.PageSize) + 1
Dim
nEnd
As
Integer
= (RadGrid1.CurrentPageIndex + 1) * RadGrid1.PageSize
For
i
As
Integer
= nStart
To
nEnd
Dim
Row
As
DataRow = Table.NewRow
Row(
"Id"
) = i
Table.Rows.Add(Row)
Next
RadGrid1.DataSource = Table
RadGrid1.VirtualItemCount =
"1000"
End
Sub