CODEWITHSUNDEEP
c#asp.netgridview
GStar
GStar

Reputation: 55

How to scroll to selected row in GridView

I have a GridView with PageSize = 20 (20 rows) but it can show only 10 rows without a vertical scrollbar appearing.

My problem is that when a postback occurs, it jumps to top row of the grid even though I selected a different row. I would like to scroll to the selected row. How can I do this?

Upvotes: 4

Views: 10995

Answers (3)

Tom B
Tom B

Reputation: 11

This code in the RowDataBound event handler for the gridview worked for me:

protected void dgv_usersRowDatabound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowIndex == intEditIndex)
    {
        DropDownList drpCategory = e.Row.FindControl("drpCategory") as DropDownList;
        drpCategory.Focus();
    }
 }

The Gridview contains a dropdownlist in each row as an EditItemTemplate.

Upvotes: 1

East of Nowhere
East of Nowhere

Reputation: 1396

This worked for me, and required no ASP.NET AJAX, UpdatePanel or cookie, and a lot less JavaScript than other solutions I've seen.

<input type="hidden" runat="server" id="hdnScroll" value="0" />
<div style="height:600px; overflow-x:hidden; overflow-y:scroll">
  <asp:GridView runat="server" ID="myGridView" OnRowDataBound="myGridView_RowDataBound" OnSelectedIndexChanged="myGridView_SelectedIndexChanged">
...
</asp:GridView>
</div>

Then

protected void myGridView_SelectedIndexChanged(object sender, EventArgs e) {
    //if(gr != null) gr.SelectedRow.Cells[0].Focus(); // Only works on an editable cell

    hdnScroll.Value = (myGridView.SelectedIndex * (int)myGridView.RowStyle.Height.Value).ToString();
}

Finally back in the .aspx, to run upon postback

<script type="text/javascript">
$(function() {
  document.getElementById('<%=myGridView.ClientID%>').scrollTop = $('#hdnScroll').val();
});

Upvotes: 0

LaGrandMere
LaGrandMere

Reputation: 10359

Add MaintainScrollPositionOnPostback in your page directive.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback ="true"%>

Another way, use a scrollTop method of the DIV that wraps your GridView:

private void ScrollGrid()
{
    int intScrollTo = this.gridView.SelectedIndex * (int)this.gridView.RowStyle.Height.Value;
    string strScript = string.Empty;
    strScript += "var gridView = document.getElementById('" + this.gridView.ClientID + "');\n";
    strScript += "if (gridView != null && gridView.parentElement != null && gridView.parentElement.parentElement != null)\n";
    strScript += "  gridView.parentElement.parentElement.scrollTop = " + intScrollTo + ";\n";
    ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ScrollGrid", strScript, true);
}

EDIT: This won't work for several reasons:

1) if the gridView is inside a NamingContainer control, like a Panel, because the Id on the client side won't be the ClientId. You need to use the UniqueId of teh control instead.

2) you can't trust the row height to calculate the scroll position. If the text in any column wraps to more than one line, or any row contains something higher than the style, the size of the row will be different

3) different browsers can have different behaviors. You're better of using jQuery scrollTop() and scroll() functions. To use them, you must use scrollTop on client side and set the value of a HiddenControl that can be read on server side to reset the position. You can't get the height of the rows in the browser until they are rendered on client side.

Upvotes: 1

Related Questions