CODEWITHSUNDEEP
asp.netdatagrid
Brian Hooper
Brian Hooper

Reputation: 22054

How to scroll to selected in a DataGrid?

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.

Upvotes: 1

Views: 1205

Answers (1)

Denys Wessels
Denys Wessels

Reputation: 17039

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>

Upvotes: 1

Related Questions