Page.MaintainScrollPositionOnPostBack issue in IE 7 when nested GridViews used

As the page’s content becomes bigger and bigger like the one I am working on currently, specific features are more critical than others. In such case we may need to apply performance and user experience techniques such as content lazy loading, partial content updating, and maintain page’s scroll position cross requests, and more …

I am concerned here about the last one – Maintain Scroll Position. fortunately, ASP.NET Page.MaintainScrollPositionOnPostBack when set to true, the required JavaScript code will be generated to do the job. and that’s just works great for most if not all browsers including Internet Explorer 7.

However, I faced a weird issue when firing any post-back request in nested GridViews (GridView in another GridView) in UpdatePanel using IE 7 only, the scroll position reset to zero and Page.MaintainScrollPositionOnPostBack simply stop to do the magic!

After investigation and debugging, I got to know where is the problem to fix but not the root cause behind this behavior. Is it IE 7 problem or the generated JS code missed a behavior that IE 7 still using?.

The decision was not to use Page.MaintainScrollPositionOnPostBack, and write my own solution. I ended up with the below script in which written using jQuery and jquery.cookie.js plugin.

The cookie is used to store the value of window’s scrollTop every time the scroll position changed via jQuery window.scroll event. And then set window’s scrollTop back to the stored value in the cookie when both a new AJAX request initialized or ended.

I did not test the below code enough, so please don’t hesitate to put your comments

 
    <script src="Scripts/jquery.cookie.js"></script>
    <script type="text/javascript">

        var scrollTopValue;
        var scrollPositionCookie = "scrollTopValue";
        $.cookie(scrollPositionCookie, $(window).scrollTop(), { expires: 10 });

        $(document).ready(function () {

            var smgr = Sys.WebForms.PageRequestManager.getInstance();

            smgr.add_initializeRequest(function () {

                scrollTopValue = $(window).scrollTop();
                if (scrollTopValue == 0) {

                    scrollTopValue = $.cookie(scrollPositionCookie);
                    $(window).scrollTop(scrollTopValue);
                }
                else {
                    $.cookie(scrollPositionCookie, scrollTopValue);
                }
            });

            smgr.add_endRequest(
                function () {

                    if (scrollTopValue == 0) scrollTopValue = $.cookie(scrollPositionCookie);
                    $(window).scrollTop(scrollTopValue);
                }
            );


            $(window).scroll(function () {

                scrollTopValue = $(window).scrollTop();
                if (scrollTopValue != 0) {
                    $.cookie(scrollPositionCookie, scrollTopValue);
                }
            });


        });

    </script>

Advertisement