title: ASP.NET GridView within Scrollable Div: Scroll to SelectedIndex
body: <p>I have a GridView contained within a scrollable div. I also have a Button that selects a row in this GirdView based upon the text of a TextBox on the page. The row is selected just fine, but I cannot get the div to scroll to the selected row programmatically. I have attempted multiple methods involving JavaScript's "scrollTop" method, but for some reason I cannot get them to work correctly. Here is my code so far (some of the code for the "btnGo_OnClick" method is taken from an answer to a similar question on the asp.net forums, but it does not appear to be working for me):</p>
  
  <p>The .aspx file:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
  CodeBehind="StudentList.aspx.cs" Inherits="WebApplication1.WebForm1" %&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
      &lt;br /&gt;
      &lt;div style="overflow: scroll; height: 400px;"&gt;
          &lt;asp:GridView ID="StudentList" runat="server" AutoGenerateColumns="False" DataSourceID="DataSource1"
              AllowSorting="true" CellPadding="4" DataKeyNames="Email"&gt;
              &lt;Columns&gt;
                  &lt;asp:BoundField DataField="LastName" HeaderText="Last" ReadOnly="True" SortExpression="LastName" /&gt;
                  &lt;asp:BoundField DataField="FirstName" HeaderText="First" ReadOnly="True" SortExpression="FirstName" /&gt;
                  &lt;asp:BoundField DataField="MiddleInitial" HeaderText="Middle" ReadOnly="True" SortExpression="MiddleInitial" /&gt;
                  &lt;asp:BoundField DataField="Phone" HeaderText="Phone" ReadOnly="True" SortExpression="Phone" /&gt;
                  &lt;asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" SortExpression="Email" /&gt;
                  &lt;asp:BoundField DataField="GPA" HeaderText="GPA" ReadOnly="True" SortExpression="GPA" /&gt;
                  &lt;asp:TemplateField HeaderText=""&gt;
                      &lt;ItemTemplate&gt;
                          &lt;asp:Button ID="btnEdit1" Text="Edit" AutoPostBack="True" runat="server" OnClick="btnEdit1_OnClick" /&gt;
                          &amp;nbsp
                          &lt;asp:Button ID="btnDelete" Text="Delete" AutoPostBack="True" runat="server" OnClick="btnDelete_OnClick" /&gt;
                      &lt;/ItemTemplate&gt;
                  &lt;/asp:TemplateField&gt;
              &lt;/Columns&gt;
              &lt;SelectedRowStyle BackColor="Black" ForeColor="White" /&gt;
          &lt;/asp:GridView&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      Search by Last Name:
      &lt;asp:TextBox ID="txtSearch" runat="server"&gt;&lt;/asp:TextBox&gt;
      &amp;nbsp
      &lt;asp:Button ID="btnGo" Text="Go" AutoPostBack="True" runat="server" OnClick="btnGo_OnClick" /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;asp:Label ID="lbl1" runat="server" Text=""&gt;&lt;/asp:Label&gt;
      &lt;asp:AccessDataSource ID="DataSource1" runat="server" DataFile="~/App_Data/University(2).accdb"
          SelectCommand="SELECT [LastName], [FirstName], [MiddleInitial], [Phone], [Email], [GPA] 
  FROM [Students] ORDER BY [LastName]" DeleteCommand=""&gt;&lt;/asp:AccessDataSource&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>And the .aspx.cs file:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Text.RegularExpressions;
  
  namespace WebApplication1
  {
      public partial class WebForm1 : System.Web.UI.Page
      {
  
          protected void Page_Load(object sender, EventArgs e)
          {
          }
  
          protected void btnDelete_OnClick(object sender, EventArgs e)
          {
              Button b = (Button)sender;
              GridViewRow containingRow = (GridViewRow)b.NamingContainer;
              String strEmail = containingRow.Cells[4].Text;
              DataSource1.DeleteCommand = "DELETE FROM [CoursesTaken] WHERE [StudentID] = '" + strEmail + "'";
              DataSource1.Delete();
              DataSource1.DeleteCommand = "DELETE FROM [Students] WHERE [Email] = '" + strEmail + "'";
              DataSource1.Delete();
              StudentList.DataBind();
          }
  
          protected void btnEdit1_OnClick(object sender, EventArgs e)
          {
              Button b = (Button)sender;
              GridViewRow containingRow = (GridViewRow)b.NamingContainer;
              Session["Email"] = containingRow.Cells[4].Text;
              Response.Redirect("~/StudentEdit.aspx");
          }
  
          protected void btnGo_OnClick(object sender, EventArgs e)
          {
              int i = 0;
              foreach (GridViewRow rowItem in StudentList.Rows)
              {
                  if (rowItem.Cells[0].Text.StartsWith(txtSearch.Text))
                  {
                      StudentList.SelectedIndex = i;
                  int intScrollTo = this.StudentList.SelectedIndex * (int)this.StudentList.RowStyle.Height.Value;
                      string strScript = "";
                      strScript += "var gridView = document.getElementById('" + this.StudentList.ClientID + "');\n";
                      strScript += "if (gridView != null &amp;&amp; gridView.parentElement != null &amp;&amp; gridView.parentElement.parentElement != null)\n";
                      strScript += "  gridView.parentElement.parentElement.scrollTop = " + intScrollTo + ";\n";
                      ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "btnGo_OnClick", strScript, true);
                      break;
                  }
                  i++;
              }
          }
      }
  </code></pre>
  
  <p>}</p>
  
  <p>Can someone explain why it's not working as expected?</p>