Scroll to the selected item

2 posts, 0 answers
  1. jc mag
    jc mag avatar
    106 posts
    Member since:
    Aug 2005

    Posted 25 Mar Link to this post

    I'm following this page:

    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">
                            <telerik:GridBoundColumn  HeaderText="" UniqueName="Position" HeaderStyle-Width="40px">
                            <telerik:GridTemplateColumn ItemStyle-CssClass="gridImage" HeaderStyle-Width="43px">
                                    <%# getImage(Container.DataItem)  %>
                            <telerik:GridBoundColumn DataField="Pseudo" HeaderText="Pseudo" UniqueName="Pseudo" >
                            <telerik:GridBoundColumn DataField="Points" HeaderText="Points" UniqueName="Points" HeaderStyle-Width="70px">
                    <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" />


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


    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?

  2. jc mag
    jc mag avatar
    106 posts
    Member since:
    Aug 2005

    Posted 25 Mar in reply to jc mag Link to this post

    Found it! I had to add: SaveScrollPosition="false"
  3. Telerik UI for ASP.NET Core is out
Back to Top