RadGrid Scroll into view

[John Brogdon]

I'm attempting to get a selected item to scroll into view.  When I use the code posted in this article, I have a couple of problems.
1. First I get a JavaScript error that states that the "GridCreated" function can't be found.  If I remove the RadUpdate Panel from the page, this goes away (I need it to work in an update panel though).  
2.  After removing the update panel from the page, var scrollArea = document.getElementById(this.ClientID + "_GridData"); returns null.
3. this.MasterTableView is null.

I'm using the 2011.1.413.35 version of the Telerik.Web.UI.dll.  I have copied the code from the article into a completely clean project to make sure my code was not interfering with it, and the problems still occur.

Could you please point me in the right direction?

Regards,

John B.

[Princy]

Hello John,

I suppose you are using ASP.NET AJAX version and you tried the  ASP.NET documentation. Here is the documentation in ajax that I tried which worked as expected with an update panel.

aspx:

<asp:UpdatePanel ID="UpdatePanel" runat="server">

  <ContentTemplate>

    <telerik:RadGrid runat="server" ID="RadGrid1" AllowPaging="True" DataSourceID="SqlDataSource1"

            ShowFooter="True" OnPreRender="RadGrid1_PreRender"   Height="600px" >

         <ClientSettings>

           <Scrolling AllowScroll="true" SaveScrollPosition="true" />

           <ClientEvents OnGridCreated="GridCreated" />

           <Selecting AllowRowSelect="true" />

        </ClientSettings>

          <mastertableview datakeynames="EmployeeID" commanditemdisplay="None"

                editmode="InPlace" AutoGenerateColumns="True">

         <Columns>

                         . . . .

                </Columns>

    </mastertableview>

     </telerik:RadGrid>

</ContentTemplate>

</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"

        SelectCommand="SELECT * FROM [Employees]">
</asp:SqlDataSource>

Javascript:

<script type="text/javascript">

 function GridCreated()
    {

   var RadGrid1 = $find('<%=RadGrid1.ClientID%>');

RadGrid1.get_masterTableView().get_dataItems()[5].set_selected("true");

   var row = RadGrid1.get_masterTableView().get_selectedItems()[0];

        if (row)
            {

            setTimeout(function()
                 {

                var rowElement = row.get_element();

                var scrollArea = RadGrid1.GridDataDiv;

                if ((rowElement.offsetTop - scrollArea.scrollTop) + rowElement.offsetHeight + 20 > scrollArea.offsetHeight) {

       scrollArea.scrollTop = scrollArea.scrollTop + (rowElement.offsetTop - scrollArea.scrollTop) + (rowElement.offsetHeight - scrollArea.offsetHeight) + rowElement.offsetHeight;

            }

           else if ((rowElement.offsetTop - scrollArea.scrollTop) < 0)
                 {

      scrollArea.scrollTop = rowElement.offsetTop;

           }

            }, 200);

         }

  }   

</script>

Thanks,
Princy.



Thanks,
Princy.

[John Brogdon]

Thanks that was the problem.  

Regards,

John