Hello Folks,
I've modeled my grid after the sample code provided under the section "Fetching additional records when the scroll bar reaches its endpoint" on this documentation page http://www.telerik.com/help/aspnet-ajax/grid-virtual-scroll-paging.html
Everything works well and as expected with the exception of this problem. In IE (any version), when I scroll to the bottom, the spinner image doesn't show. This is confusing to the user as there's no indication that the grid is fetching more records. Eventually, the records are loaded but it's hard to notice it happening.
The only difference between my code and the sample code is that I'm firing the AJAX request to load more records by triggering the click event on a hidden button. Here's my function to handle scrolling:
The hidden button calls a server side function. Here's the button markup:
I've included an AjaxSetting for the hidden button in my RadAjaxManagerProxy here:
The odd thing is, if I grab the scroll bar and move it to the bottom of the grid, the spinner shows and everything is fine. It only happens if I scroll to the bottom of the list. I put a break point in the HandleScrolling JS function (inside the "isOnBottom" check) and it seems to be getting called twice in IE when I scroll. The first time doesn't seem to fire the AJAX call, even though it hits the hidden button click function call. The second time does trigger it though. I'm not sure if this behavior has something to do with this problem.
I was wondering if you've seen this behavior before or can reproduce it. I appreciate your help.
Thanks,
Mohammed
I've modeled my grid after the sample code provided under the section "Fetching additional records when the scroll bar reaches its endpoint" on this documentation page http://www.telerik.com/help/aspnet-ajax/grid-virtual-scroll-paging.html
Everything works well and as expected with the exception of this problem. In IE (any version), when I scroll to the bottom, the spinner image doesn't show. This is confusing to the user as there's no indication that the grid is fetching more records. Eventually, the records are loaded but it's hard to notice it happening.
The only difference between my code and the sample code is that I'm firing the AJAX request to load more records by triggering the click event on a hidden button. Here's my function to handle scrolling:
function
HandleScrolling(sender, eventArgs) {
if
(eventArgs.get_isOnBottom()) {
var
grid = $find(
"<%=rgUserList.ClientID %>"
);
var
hiddenGroupTotalUserCount = document.getElementById(
'<%=hiddenGroupTotalUserCount.ClientID %>'
);
var
allRecordsCount = parseInt(hiddenGroupTotalUserCount.value);
var
currentlyDisplayedRecordsCount = grid.get_masterTableView().get_pageSize();
if
(currentlyDisplayedRecordsCount < allRecordsCount) {
//if the visible items are less than the entire record count trigger a click event for the load more users button
var
button = document.getElementById(
'<%=buttonHiddenLoadMoreUsers.ClientID %>'
);
if
(button) {
button.click();
}
}
else
{
//Otherwise, hide the "scroll for more" label
scrollForMoreLabel = document.getElementById(
"<%=scrollForMoreLabel.ClientID%>"
);
if
(scrollForMoreLabel != undefined) {
scrollForMoreLabel.style.visibility =
"hidden"
;
}
}
}
}
The hidden button calls a server side function. Here's the button markup:
<input runat=
"server"
ID=
"buttonHiddenLoadMoreUsers"
OnClick=
"ButtonHiddenLoadMoreUsers_Click"
Style=
"width: 0; height: 0; display: none;"
/>
I've included an AjaxSetting for the hidden button in my RadAjaxManagerProxy here:
<
telerik:RadAjaxManagerProxy
ID
=
"ajaxManager2"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"buttonHiddenLoadMoreUsers"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"rgUserList"
LoadingPanelID
=
"loadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
The odd thing is, if I grab the scroll bar and move it to the bottom of the grid, the spinner shows and everything is fine. It only happens if I scroll to the bottom of the list. I put a break point in the HandleScrolling JS function (inside the "isOnBottom" check) and it seems to be getting called twice in IE when I scroll. The first time doesn't seem to fire the AJAX call, even though it hits the hidden button click function call. The second time does trigger it though. I'm not sure if this behavior has something to do with this problem.
I was wondering if you've seen this behavior before or can reproduce it. I appreciate your help.
Thanks,
Mohammed