This is a migrated thread and some comments may be shown as answers.

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

1 Answer 16 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 30 Aug 2013, 03:50 PM
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.

1 Answer, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 31 Aug 2013, 09:41 AM
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
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Share this question
or