How to scroll to selected in a DataGrid?

Question

I'm displaying a Datagrid like this and inviting the user to make a selection...

<div id="gradesDiv" style="overflow: auto; width: 380px; height: 300px">
    <asp:DataGrid id="gradesGrid"
                  BorderWidth="1"
                  CellPadding="3"
                  AutoGenerateColumns="true"
                  runat="server">
        <Columns>
             <asp:ButtonColumn HeaderText="Select&nbsp;Item"
                               ButtonType="LinkButton"
                               Text="Select"
                               CommandName="Select">
             </asp:ButtonColumn>
        </Columns>
    </asp:DataGrid>
 </div>

(three other columns are added in the code-behind). But when the user makes a selection, a postback is performed and the scroll position lost. I'd like to be able to reset the div to display the selected item. Does anyone know how to do this?

I've tried adding

MaintainScrollPositionOnPostback="true"

to the asp, but it doesn't help. I attempted to maintain the scroll position in the codebehind but gradesDiv does not appear to be available to the code-behind.

If you're using .NET 4.0 you could try setting gridview's `EnablePersistedSelection="true"` — Denys Wessels, Jan 09 '13 at 15:43
@deni, thanks for the suggestion: I am using .Net 4.0, but it doesn't work if I put it in either the DataGrid or the div. — Brian Hooper, Jan 09 '13 at 15:54
I found a solution [here](http://stackoverflow.com/questions/1184576/maintain-scroller-position-on-div-after-page-postback-asp-net), once I noticed that it is the `div` needing scrolling and not the `DataGrid`. — Brian Hooper, Jan 09 '13 at 16:20

Denys Wessels · Accepted Answer · 2013-01-09T16:26:08.040

1

There's quite a few creative approaches on the web on how this can be done.Just search for - maintaining div scroll position on postback.This is just one of such examples:

<script type="text/javascript">
    $(document).ready(function () {
        var xPos, yPos;
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);

        var divId = 'gradesDiv';

        function BeginRequestHandler(sender, args) {
            xPos = $get(divId).scrollLeft;
            yPos = $get(divId).scrollTop;
        }
        function EndRequestHandler(sender, args) {
            $get(divId).scrollLeft = xPos;
            $get(divId).scrollTop = yPos;
        }
    });
</script>

edited Jan 09 '13 at 16:26

answered Jan 09 '13 at 16:10

Denys Wessels

16,829
14
80
120

Thank you for your answer, but this fails with `Microsoft JScript runtime error: object expected` – Brian Hooper Jan 10 '13 at 08:45
Could you specify at which line is it failing? – Denys Wessels Jan 10 '13 at 09:44
so far as I can tell, the `$(document).ready(function (){` is the problem. – Brian Hooper Jan 10 '13 at 10:08
Did you add a reference to the jQuery library in the section? – Denys Wessels Jan 10 '13 at 10:14
no, I didn't. That's probably the reason, then. I won't be able to try it for a while. Thanks again for your help. – Brian Hooper Jan 10 '13 at 11:08

How to scroll to selected in a DataGrid?

1 Answers1