Ajax ModalPopupExtender Postback Scrollbar - asp.net

Question

I have a asp Panel that opens as a Modal Popup window using ajax.
Within this panel are some user controls that can postback, for example a gridview that allows custom editing and adding.
However due to the size of the Panel I have had to introduce scrollbars so that the user can scroll the asp Panel and edit the corresponding gridview. On postback though the scroll bar within the Panel is repeatedly placed at the top, and not maintaining scroll position.
My question is; is there a way to maintain scroll position within thisModal Popup Extender Panel?

Answer 1

The code that was used (for reference) is:
var iST;
$(document).ready(function() {
getScrollPosition();
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(getScrollPosition);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setScrollPosition);
});
function pageLoad() {
var popup = $find('<%=MODALPOPUPNAME.ClientID%>');
popup.add_shown(setScrollPosition);
}
function getScrollPosition() {
iST = $("#<%=PANELNAME.ClientID %>").scrollTop();
}
function setScrollPosition() {
$("#<%=PANELNAME.ClientID %>").scrollTop(iST + 20);
}
Thanks.

Answer 2

After spending a few hours, I was able to achieve this. Let's say we have this div called myDiv which is in a pop up panel called pnlPopup.We need javascript to mark down the scrolled position everytime there was a scoll on myDiv.We mark down this scrolled position in a hidden element called hfScrollP.
<script type="text/javascript">
function markScrollPosition() {
var div = document.getElementById("myDiv").scrollTop;
document.getElementById('<%=hfScrollP.ClientID %>').value = div;
}
</script>
<asp:HiddenField ID = "hfScrollP" runat = "server" />
<asp:Panel ID="pnlPopup" runat="server" Width="750px" style="display:none;">
<div id="myDiv" style="height: 350px; width: 700px;overflow: auto;"
onscroll="markScrollPosition();">
</div>
</asp:Panel>
And then we have the button that will open the pop up on click and our modal pop up extender.
<asp:Button ID="btnShowModalPopup" runat="server" Text="Show" />
<ajaxToolkit:ModalPopupExtender ID="mpePopup" runat="server"
TargetControlID="btnShowModalPopup"
PopupControlID="pnlPopup" DropShadow="True" BackgroundCssClass="modalBackground"
Enabled ="true">
</ajaxToolkit:ModalPopupExtender>
We need this javascript in order to set the scroll position on the pop up everytime we have a postback and the pop up is shown.
<script type="text/javascript" language="javascript">
function pageLoad() {
var modal = $find('<%=mpePopup.ClientID %>');
$find('<%=mpePopup.ClientID %>').add_shown(
function () {
$('#myDiv').scrollTop(document.getElementById('<%=hfScrollP.ClientID %>').value);
}
);
}
</script>
In your code behind.
Private Sub btnShowModalPopup_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShowModalPopup.Click
//Do your necessary processing
mpePopup.show();
End Sub
That's it. When the pop up is shown it will scroll back to the last marked down scrolled position. Hope it helps :)

Answer 3

You can change javascript code for specific Div.
<script type="text/javascript">
function pageLoad() {
$('#DataDiv').scrollTop(document.getElementById('<%=hfScrollT.ClientID %>').value).scrollLeft(document.getElementById('<%=hfScrollL.ClientID %>').value);
}
</script>
Hope to help!