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

Virtual Scrolling/Paging spinner not showing in IE

1 Answer 41 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mohammed
Top achievements
Rank 1
Mohammed asked on 23 Oct 2014, 05:49 PM
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:

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

1 Answer, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 28 Oct 2014, 12:27 PM
Hi Mohammed,

Since the grid repopulates this means that something in the AJAX configuration is not correct. Could you please share with us the entire page markup and code-behind so we could further research the matter? Additionally please try replacing the input with an ASP Button and test the page again.

ASPX:
<asp:Button runat="server" ID="buttonHiddenLoadMoreUsers" Style="width: 0; height: 0; display: none;" OnClick="ButtonHiddenLoadMoreUsers_Click" />

Additionally note that there is another alternative for virtualizing the data. More precisely enabling the built-in virtualization of the grid shown here.

Regards,
Angel Petrov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Mohammed
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question
or