This is a migrated thread and some comments may be shown as answers.
Grid virtual scrolling with 100% height
1 Answer 64 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Wyatt asked on 30 Jun 2011, 05:52 PM

I implemented the second type of virtual scrolling on the following page.
I created a more flexible implementation while adding 100% height functionality.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<head runat="server">
    <style type="text/css"
    html, body, form 
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <script type="text/javascript">
        var activeGrid;
        function RadGrid1_OnGridCreated(sender, e) {
            activeGrid = sender;
        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;
           = 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");
    <telerik:RadGrid ID="RadGrid1" runat="server" Height="100%" PageSize="50" AllowPaging="True" AllowCustomPaging="true">
    <MasterTableView Width="100%" />
    <PagerStyle Visible="false" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <ClientEvents OnGridCreated="RadGrid1_OnGridCreated" OnScroll="RadGrid1_OnScroll" />
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
    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
    RadGrid1.DataSource = Table
    RadGrid1.VirtualItemCount = "1000"
End Sub

1 Answer, 1 is accepted

Sort by
Maria Ilieva
Telerik team
answered on 05 Jul 2011, 03:41 PM
Hello Wyatt,

Thank you for sharing your approach.

Best wishes,
Maria Ilieva
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Asked by
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question