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.
Wyatt
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.
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">
<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


1 Answer, 1 is accepted

Sort by
0
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!

Tags
Grid
Asked by
Wyatt
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question
or