Grid virtual scrolling with 100% height in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

Grid virtual scrolling with 100% height

1 Answer 64 Views

Grid

This is a migrated thread and some comments may be shown as answers.

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

<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

1 Answer, 1 is accepted