Scroll to the selected item

[jc mag]

I'm following this page: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/functionality/scrolling/how-to/scrolling-to-the-selected-item

but the scroll remains at the top of the grid...

Here is my .aspx page:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" RenderMode="Auto" AllowSorting="False" GroupingEnabled="false" AllowPaging="False" OnNeedDataSource="RadGrid1_OnNeedDataSource" Skin="Metro" OnItemDataBound="RadGrid1_OnItemDataBound" AllowFilteringByColumn="False">
                <MasterTableView AllowNaturalSort="false">
                    <Columns>
                        <telerik:GridBoundColumn  HeaderText="" UniqueName="Position" HeaderStyle-Width="40px">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn ItemStyle-CssClass="gridImage" HeaderStyle-Width="43px">
                            <ItemTemplate>
                                <%# getImage(Container.DataItem)  %>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="Pseudo" HeaderText="Pseudo" UniqueName="Pseudo" >
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Points" HeaderText="Points" UniqueName="Points" HeaderStyle-Width="70px">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings ReorderColumnsOnClient="false" AllowColumnsReorder="false">
                    <Virtualization EnableVirtualization="false" InitiallyCachedItemsCount="100"
                        LoadingPanelID="RadAjaxLoadingPanel1" ItemsPerView="20" />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="300px" />
                    <Resizing AllowColumnResize="false" />
                    <ClientEvents OnGridCreated="GridCreated" />
                </ClientSettings>
            </telerik:RadGrid>

 

<script type="text/javascript">
    function GridCreated(sender, eventArgs) {
        //gets the main table scrollArea HTLM element
        var scrollArea = document.getElementById(sender.get_element().id + "_GridData");
        var row = sender.get_masterTableView().get_selectedItems()[0];

        //if the position of the selected row is below the viewable grid area
        if (row) {
            if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
                //scroll down to selected row
                scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
                row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
            }
            //if the position of the the selected row is above the viewable grid area
            else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
                //scroll the selected row to the top
                scrollArea.scrollTop = row.get_element().offsetTop;
            }
        }
    }
</script>

 

I select the 50th row in the RadGrid1_OnItemDataBound event handler.

In the browser, in debug mode, it goes in the GridCreated function, and at the end scrollArea.scrollTop is set to 2440 ; but the scroll remains at the top of the grid...

What's wrong?

[jc mag]

Found it! I had to add: SaveScrollPosition="false"