Moving a grid to place an item at the top of the list

[John]

I have a situation where I am presenting the user with a large volume of records on screen.  Call it 500 rows of data.  This information is being viewed in a scrolling section via ScrollHeight property of the grid.  A user can click on a row in the grid which will launch a new page of details.  On that new page there is a "return to list" button that returns the user to the list of records and the desired behavior is that the grid have the previously selected row slected and the window be scrolled down to that item.

So as an example, the user scrolls down to row 250 and clicks on it.  After viewing the infomation and clicking on the "return to list" button the user is presented with the list and row 250 is shown on screen almost as if the user never left the screen.

We've been able to come up with some javascript code that will do the work, but it executes a ltitle slowly resultsing in some jumpy behavior on the screen.  It works, but I am hoping there is a better solution out there.

[Jayesh Goyani]

Hello,

Let me know by using this JS you can able to improve performance or not.

<telerik:RadCodeBlock ID="telerikodeBlock1" runat="server">
    <script type="text/javascript">
        function SetFocusonGrid() {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var scrollArea = document.getElementById(grid.get_element().id + "_GridData");
            if (grid) {
                var MasterTable = grid.get_masterTableView();
                var Rows = MasterTable.get_dataItems();
                for (var i = 0; i < Rows.length; i++) {
                    var row = Rows[i];
                    var ClientDataKey_ID = row.getDataKeyValue("ID");
                    if (parseInt(ClientDataKey_ID) == 11) {
                        //row.get_cell("ID").focus();

                        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>
</telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"

    AutoGenerateColumns="false">

    <MasterTableView ClientDataKeyNames="ID">

        <Columns>

            <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">

            </telerik:GridBoundColumn>

        </Columns>

    </MasterTableView>

    <ClientSettings>

        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="250px"></Scrolling>

    </ClientSettings>

</telerik:RadGrid>
 <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="SetFocusonGrid(); return false;" />


protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data1 = new[] {
              new { ID = 1, Name ="Name_1"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 5, Name = "Name_1"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 11, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 3, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"},
              new { ID = 2, Name = "Name_2"},
              new { ID = 4, Name = "Name_1"},
              new { ID = 4, Name = "Name_4"}
          };
        RadGrid1.DataSource = data1;
    }

Thanks,
Jayesh Goyani