Hello,
I have utilized the virtual scrolling example provided by the Telerik website verbatim - with exception to the implemented DataSource (which I'm doing programmatically for the sake of the example), and am getting issues. The website is here: Virtual Scrolling and Paging.
The problems are as follows:
- When I scroll to the bottom of the list, the AJAX request runs properly (seen during debugging), but the grid does not update with more records. Also, all other attempts to scroll cause the loading animation to appear and simply hang on the screen so that the page must be reloaded
- After clicking on either of the heading columns to sort, it's successful the 1st time, but afterwards it hangs, nothing is clickable, and the page must be reloaded
Please see the attached image 'ScrollingHangingIllustration.png'. Also, see below for the code. Please help!!
Client-Side RadCodeBlock
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function HandleScrolling(e) {
var grid = $find("<%=RadGrid1.ClientID %>");
var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");
if (IsScrolledToBottom(scrollArea)) {
var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);
//if the visible items are less than the entire record count
//trigger an ajax request to increase them
if (currentlyDisplayedRecords <
100
)
{ $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords"); }
}
}
//calculate when the scroll bar is at the bottom
function IsScrolledToBottom(scrollArea) {
var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;
return currentPosition == scrollArea.scrollHeight;
}
</
script
>
</
telerik:RadCodeBlock
>
Client-Side AJAX Manager
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
OnAjaxRequest
=
"RadAjaxManager1_AjaxRequest"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
Height
=
"75px"
Width
=
"75px"
Transparency
=
"25"
>
<
img
alt
=
"Loading..."
src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
style="border: 0;" /></
telerik:RadAjaxLoadingPanel
>
Client-Side RadGrid
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
Skin
=
"Silk"
AllowSorting
=
"True"
AllowPaging
=
"True"
PageSize
=
"15"
Width
=
"97%"
AutoGenerateColumns
=
"False"
GridLines
=
"None"
>
<
PagerStyle
Visible
=
"False"
/>
<
MasterTableView
Width
=
"99%"
TableLayout
=
"Fixed"
CommandItemDisplay
=
"None"
CurrentResetPageIndexAction
=
"SetPageIndexToFirst"
PageSize
=
"15"
>
<
SortExpressions
>
<
telerik:GridSortExpression
FieldName
=
"CreateDate"
SortOrder
=
"Descending"
/>
</
SortExpressions
>
<
Columns
>
<
telerik:GridBoundColumn
HeaderText
=
"Code"
DataField
=
"ZipFileCode"
UniqueName
=
"ZipFileCode"
>
<
HeaderStyle
Width
=
"90px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderText
=
"Description"
DataField
=
"ZipFileDesc"
UniqueName
=
"ZipFileDesc"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderText
=
"Select/Omit"
DataField
=
"ZipType"
UniqueName
=
"ZipType"
>
<
HeaderStyle
Width
=
"100px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderText
=
"Create Date"
DataField
=
"CreateDate"
UniqueName
=
"CreateDate"
DataType
=
"System.DateTime"
DataFormatString
=
"{0:d}"
ShowSortIcon
=
"true"
>
<
HeaderStyle
Width
=
"100px"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderText
=
"Company"
DataField
=
"Company"
UniqueName
=
"Company"
>
<
HeaderStyle
Width
=
"100px"
/>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
ScrollHeight
=
"300px"
/>
<
ClientEvents
OnScroll
=
"HandleScrolling"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
Server-Side AjaxRequest
Protected
Sub
RadAjaxManager1_AjaxRequest(
ByVal
sender
As
Object
,
ByVal
e
As
AjaxRequestEventArgs)
Handles
RadAjaxManager1.AjaxRequest
RadGrid1.PageSize = 10 + RadGrid1.PageSize
RadGrid1.Rebind()
End
Sub
Server-Side Datasource
Public
Function
GetItemsTest(
ByVal
startRowIndex
As
Integer
,
ByVal
maxRows
As
Integer
)
As
DataSet
Dim
dt
As
DataTable =
New
DataTable(
"Sample"
)
dt.Columns.Add(
"Company"
, System.Type.
GetType
(
"System.String"
))
dt.Columns.Add(
"ZipFileCode"
, System.Type.
GetType
(
"System.String"
))
dt.Columns.Add(
"ZipFileDesc"
, System.Type.
GetType
(
"System.String"
))
dt.Columns.Add(
"ZipType"
, System.Type.
GetType
(
"System.String"
))
dt.Columns.Add(
"CreateDate"
, System.Type.
GetType
(
"System.DateTime"
))
dt.Columns.Add(
"DeletedFile"
, System.Type.
GetType
(
"System.Boolean"
))
dt.Columns.Add(
"UploadedBy"
, System.Type.
GetType
(
"System.String"
))
Dim
row
As
DataRow
Dim
dte
As
DateTime
dte = DateTime.Now
For
i
As
Integer
= 0
To
maxRows
row = dt.NewRow()
row(0) =
"Company"
& i
row(1) =
"ZipFileCode"
& i
row(2) =
"ZipFileDesc"
& i
row(3) =
"ZipType"
& i
row(4) = dte
row(5) =
True
row(6) =
"UploadedBy"
& i
dt.Rows.Add(row)
Next
Dim
ds
As
New
DataSet(
"Sample"
)
ds.Tables.Add(dt)
Return
ds
End
Function
Private
Sub
RadGrid1_NeedDataSource(
ByVal
source
As
Object
,
ByVal
e
As
Telerik.Web.UI.GridNeedDataSourceEventArgs)
Handles
RadGrid1.NeedDataSource
RadGrid1.DataSource = GetItemsTest(0, RadGrid1.PageSize)
End
Sub
Thanks!