Menu
I have a GridView, displayed in a div, which is contained in an UpdatePanel control on an asp.net page. The div is setup to make the GridView scrollable when it is displaying a lot of information, while making other information in the Update Panel stable.
Anyway, the items in the GridView are clickable, but the scroll position of the containing div is not being preserved through the postback no matter what I try. Currently I'm trying to resolve the issue with jQuery, as this seems the most straightforward way. My code follows:
<head id="Head1" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
var scroll = function () {
Y: '#<%= scrollPos.ClientID %>'
};
$(document).ready(function () {
$("#subResults").scrollTop($(scroll.Y).val());
$('#subResults').scroll(function () {
$(scroll.Y).val(this.scrollTop);
});
});
</script>
</head>
<body>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="resultPanel" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
<ContentTemplate>
<div id="subResults">
<asp:GridView ID="resultGrid" runat="server"
AutoGenerateColumns="false" Visible="True"
AutoGenerateSelectButton="True"
OnRowDataBound="resultGrid_RowDataBound"
OnSelectedIndexChanged="resultGrid_SelectedIndexChanged">
<Columns>
// columns columns columns...
</Columns>
</asp:GridView>
<asp:HiddenField ID="scrollPos" runat="server" Value="0" />
</div>
</body>
I'm using the example given here. Whether I try to do this exactly as given or not, it doesn't work: my GridView item takes the click, does what it's supposed to do, and then the GridView is scrolled back to the top again after the Postback completes. How can I get my div "subResults" to hold its scroll position through the Postback?
975
Resolved. The code block below, pasted just below my Script Manager object, got the scrolling div behaving the way I wanted:
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('scrollDiv').scrollLeft;
yPos = $get('scrollDiv').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('scrollDiv').scrollLeft = xPos;
$get('scrollDiv').scrollTop = yPos;
}
</script>
Credit to Andrew Frederick
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With