Multiple instances of a user control that contains a RadGrid behaves oddly.

[Operations]

I have create a user control that contains a RadGrid.  I have enabled infinite Scrolling and this worked fine until I realized that If I wanted to have the User control multiple times on a single page.  I found that I needed to use the RadAjaxManagerProxy inside the user control.Then I placed the RadAjaxManager on the master page.  Once I did this the scrolling functionality stopped working.

Master Page.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>

User Control

<asp:HiddenField ID="hdfnTotalRecords" runat="server" />
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function HandleScrolling(e) {
            var totalRecords = $('[Id$=hdfnTotalRecords]').val();
            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 < totalRecords) {
                    alert("here");
                    $find("<%= RadAjaxManager.GetCurrent(Page).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;
        }

        function onRequestStart(sender, eventArgs) {
            if (eventArgs.get_eventTarget().indexOf("ibtnPhone") != -1) {
                eventArgs.set_enableAjax(false);
            }
        }

        function RowDblClick(sender, eventArgs) {
            var test = eventArgs.getDataKeyValue("Id");
            window.location.href = '/Messages/AddEditMessage.aspx?Id=' + test
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadWindowManager id="WindowManager1" runat="server">
    <windows>
        <telerik:radwindow id="Window1" top="150" left="10" runat="server" width="700px" height="150px"></telerik:radwindow>
    </windows>
</telerik:RadWindowManager>

<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server"  >
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy >

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" MinDisplayTime="500" Transparency="25" BackColor="#ffffff" runat="server" CssClass="ajaxloader"  />

<telerik:RadGrid ID="RadGrid1" runat="server"
    AllowSorting="True" GridLines="None"
    AutoGenerateColumns="false"
    OnItemCommand="RadGrid1_ItemCommand"
    OnItemDataBound="Messages_ItemDataBound"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowAutomaticDeletes="True"
    AllowPaging="true"
    PageSize="5">

    <PagerStyle Visible="False"/>
    <%--<PagerStyle Visible="true" />--%>

    <MasterTableView Width="100%" DataKeyNames="Id" CommandItemDisplay="Top" ClientDataKeyNames="Id">
        <CommandItemTemplate>
            <table>
                <tr>
                    <td width="45px">
                        <asp:LinkButton ID="btnAddNew" runat="server" CommandName="AddNewMessage" ToolTip="Add a new message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_new_15x15.gif" /> New</asp:LinkButton>
                    </td>
                    <td width="45px">
                        <asp:LinkButton ID="btnEdit" runat="server" CommandName="EditMessage" ToolTip="Edit the selected message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_edit_15x15.gif" /> Edit</asp:LinkButton>
                    </td>
                    <td width="60px">
                        <asp:LinkButton ID="btnDelete" runat="server" CommandName="DeleteMessage" ToolTip="Delete the selected message."><img style="border:0px;vertical-align:middle;" alt="" src="/Images/pc_icon_delete_15x15.gif" /> Delete</asp:LinkButton>
                    </td>
                </tr>
            </table>
        </CommandItemTemplate>
        <Columns>
            <telerik:GridClientSelectColumn  UniqueName="ClientSelect" HeaderStyle-Width="5%" />
            <telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id" DataType="System.Int32" HeaderStyle-Width="20%" />
            <telerik:GridBoundColumn DataField="DisplayName" HeaderText="Name" UniqueName="DisplayName" DataType="System.String" HeaderStyle-Width="20%" />
            <telerik:GridBoundColumn DataField="FileDateTime" HeaderText="Created Date/Time" UniqueName="Created" DataType="System.DateTime" HeaderStyle-Width="20%" DataFormatString="{0:MM/dd/yy hh:mm tt}" />
            <telerik:GridBoundColumn DataField="LastSentDateTime" HeaderText="Last Used" UniqueName="Sent" DataType="System.DateTime" HeaderStyle-Width="20%" DataFormatString="{0:MM/dd/yy hh:mm tt}" />
            <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="30%"
                    HeaderText="Message Type" AllowFiltering="false" UniqueName="MessageFormat" SortExpression="MessageFormat">
                <ItemTemplate>
                    <asp:ImageButton ID="ibtnPhone" runat="server" ImageUrl="~/Images/pc_icon_phone.gif" CommandName="ListenPhone" CommandArgument="" ToolTip="Listen to message" />
                    <asp:ImageButton ID="ibtnSMS" runat="server" ImageUrl="~/Images/pc_icon_txt.gif" CommandName="ViewSMS" CommandArgument="" ToolTip="View SMS Message" />
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Left" />
                <ItemStyle HorizontalAlign="Left" />
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>

    <ClientSettings>
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowDblClick="RowDblClick" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="135px"/>
        <ClientEvents OnScroll="HandleScrolling"/>
    </ClientSettings>
</telerik:RadGrid>

Page that contains multiple Instances.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" CssClass="tabStrip">
        <Tabs>
            <telerik:RadTab Text="Messages">
            </telerik:RadTab>
            <telerik:RadTab Text="Greetings" Visible="false">
            </telerik:RadTab>
            <telerik:RadTab Text="Trailers" Visible="false">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="multiPage">
        <telerik:RadPageView ID="RadPageView1" runat="server">
            <ucMessages:Messages ID="ucMessages" runat="server" />
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView3" runat="server">
            <ucMessages:Messages ID="ucGreetingMessages" runat="server" />
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView4" runat="server">
            <ucMessages:Messages ID="ucTrailerMessages" runat="server" />
        </telerik:RadPageView>
    </telerik:RadMultiPage>

[Antonio Stoilkov]

Hi Andrew,

I examined your code and found that totalRecords variable in the JavaScript is never populated and because of that is never possible to load more records. If this is not the issue in your case please send us a small working project demonstrating the problem.

All the best,
Antonio Stoilkov
the Telerik team