How do i maintain the position of scrollbar in tabpanel of Ajax TabContainer after partial postback? So far I tried the following script but it wont retrieve the position.
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndReq开发者_StackOverflow中文版uestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('<%=InputTabPanel.ClientID%>').scrollLeft;
yPos = $get('<%=InputTabPanel.ClientID%>').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('<%=InputTabPanel.ClientID%>').scrollLeft = xPos;
$get('<%=InputTabPanel.ClientID%>').scrollTop = yPos;
}
</script>
You can include MaintainScrollPositionOnPostback on <%@ Page%> directive, like this:
<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>
With this, javascript is automatic generated by ASP.NET. But, if your control is wrapped into a UpdatePanel, there is no reason for a complete postback and a consequent lose of position.
This does indeed work providing you set CombineScripts = True of script control properties and when using a content page put the script or reference to the script file in the BodyContent. See below...
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
...move script at the top of the BodyContent area
</asp:Content
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Scripts/site.js" type="text/javascript"></script>
<div>
...markup
</div>
</asp:Content>
Below is in my site.js file
//-------------------------------------------------------//
// Maintain scroll position in given element or control
//------------------------------------------------------//
var xInputPanel, yInputPanel;
var xProductPanel, yProductPanel;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
yInputPanel = $get ('MainContent_Panel1').scrollTop;
yProductPanel = $get('MainContent_Panel2').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('MainContent_Panel1').scrollTop = yInputPanel;
$get('MainContent_Panel2').scrollTop = yProductPanel;
}
Note: You may get an error "Microsoft JScript runtime error: 'Sys' is undefined" if you don't move the js script into the BodyContent. The Script needs to run after the ScriptManager.
精彩评论