Grid does not update after scrolling

[Operations]

I am using the scrolling functionality of the grid in order to load more records if the user scrolls to the bottom of the page.I have taken the examples from the site and changed the data source.  Now when I scroll to the end the grid does not show the additional records.  In the code behind AjaxRequest I can see that the page size is increasing every time i reach the bottom of the page but no loader image shows up and the grid does not show the additional records.

Here is the code
Thank you

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
     RadGrid1.PageSize = 15 + RadGrid1.PageSize;
     RadGrid1.Rebind();
}

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">


    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

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

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

    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
      AllowSorting="True" AllowPaging="True" PageSize="15" Width="97%" GridLines="None">

      <PagerStyle Visible="False" />

      <MasterTableView Width="99%" TableLayout="Fixed" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
        DataSourceID="SqlDataSource1" PageSize="15">
      </MasterTableView>

      <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100px" />
        <ClientEvents OnScroll="HandleScrolling" />
      </ClientSettings>
    </telerik:RadGrid>


<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnection %>"
  SelectCommand="SELECT DisplayName FROM SP_Messages"></asp:SqlDataSource>
</asp:Content>

[Mira]

Hello Andrew,

In order to implement the desired functionality, you need to add a setting the AJAX manager to update the grid:

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
    </UpdatedControls>
</telerik:AjaxSetting>

I hope this helps.

Regards,
Mira
the Telerik team