none
To keep scroll position of two datagrids in a web page

    Question

  • Hi All

     

     I'm currently working in ASP.NET 2005 (The application developed in .NET 2003 and converted into .NET 2005 version recently). In that I'm using datagrid in many of the pages. The client requires to maintain scroll position of datagrid in all pages. I done it this for all pages which contains one scrollable datagrid with javascript code. But now I need to maintain the scroll position of two scrollable datagrids in a page.  how can i change in the following javascript for supporting more than one scrollable datagrids.

    <script language="javascript">

    <!--

    ///This function sets the scroll position of div to cookie.

    function setScrollPos(){

    var divY = document.getElementById('div1').scrollTop;

    document.cookie = "divPos=!*" + divY + "*!";

    }

    ///Attaching a function on window.onload event.

    window.onload = function()

    {

    var strCook = document.cookie; if(strCook.indexOf("!~")!=0)

    {

    var intS = strCook.indexOf("!~");

    var intE = strCook.indexOf("~!"); var strPos = strCook.substring(intS+2,intE);

    document.body.scrollTop = strPos;

    }

    /// This condition will set scroll position od <div>.

    if(strCook.indexOf("!*")!=0)

    {

    var intdS = strCook.indexOf("!*");

    var intdE = strCook.indexOf("*!");

    var strdPos = strCook.substring(intdS+2,intdE); document.getElementById('div1').scrollTop = strdPos;

    }

    }

     

    /// Function to set Scroll position of page before postback.

    function SetScrollPosition()

    {

    var intY = document.body.scrollTop; document.cookie = "yPos=!~" + intY + "~!";

    }

    /// Attaching SetScrollPosition() function to window.onscroll event.

    window.onscroll = SetScrollPosition;

     

    //-->

    </script>

    <div id="div1" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90%"; onscroll="setScrollPos();">

    <asp : datagrid>

    </asp:datagrid></div>

     

     I have tried <pages maintainScrollPositionOnPostBack="true"/> in web.config file and

    <%@ Page language="c#" Inherits="test.aspx" CodeFile="test.aspx.cs" MaintainScrollPositionOnPostback="true"%>

    but it is also not working ..

     

    Please help me

     

    Thanks in advance

    Fraijo.

    Friday, May 30, 2008 12:34 PM

All replies

  •  

    ///This function sets the scroll position of div to cookie.

    function setScrollPos(){

    var div1Y = document.getElementById('div1').scrollTop;

    var div2Y = document.getElementById('div2').scrollTop;

    document.cookie = "div1Pos=!*" + div1Y + "*!" + " div2Pos=!*" + div2Y + "*!";

    }

     

     

    ///Attaching a function on window.onload event.

    window.onload = function()

    {

    var strCook = document.cookie; if(strCook.indexOf("!~")!=0)

    {

    var intS = strCook.indexOf("!~");

    var intE = strCook.indexOf("~!"); var strPos = strCook.substring(intS+2,intE);

    document.body.scrollTop = strPos;

    }

    /// This condition will set scroll position of <div> 1.

    if(strCook.indexOf("iv1Pos=!*")!=0)

    {

    var intdS = strCook.indexOf("iv1Pos=!*");

    var intdE = strCook.indexOf("*!");

    var strdPos = strCook.substring(intdS+9,intdE);
    document.getElementById('div1').scrollTop = strdPos;

    }

    /// This condition will set scroll position of <div> 2.

    if(strCook.indexOf("iv2Pos=!*")!=0)

    {

    var intdS = strCook.indexOf("iv2Pos=!*");

    var intdE = strCook.indexOf("*!");

    var strdPos = strCook.substring(intdS+9,intdE);
    document.getElementById('div2').scrollTop = strdPos;

    }

    }

     

    <div id="div1" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90%"; onscroll="setScrollPos();">

    <asp : datagrid>

    </asp:datagrid></div>

     

    <div id="div2" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90%"; onscroll="setScrollPos();">

    <asp : datagrid>

    </asp:datagrid></div>

    Friday, August 08, 2008 8:14 PM
  • There is a problem with this script: In the second var (var intdE = strCook.indexOf("*|");) you need to make your substring characters a little different so that it works. I just changed it to a pipe character and works like a charm. Enjoy!

    Working code:

    <script language="javascript" type="text/javascript">

        //This function sets the scroll position of div to cookie.
        function setScrollPos() {
            var div1Y = document.getElementById('div1').scrollTop;
            var div2Y = document.getElementById('div2').scrollTop;
            document.cookie = "div1Pos=!*" + div1Y + "*!" + " div2Pos=|*" + div2Y + "*|";
        }

        ///Attaching a function on window.onload event.
        window.onload = function () {
            var strCook = document.cookie; if (strCook.indexOf("!~") != 0) {
                var intS = strCook.indexOf("!~");
                var intE = strCook.indexOf("~!"); var strPos = strCook.substring(intS + 2, intE);
                document.body.scrollTop = strPos;
            }

            /// This condition will set scroll position of <div> 1.
            if (strCook.indexOf("iv1Pos=!*") != 0) {
                var intdS = strCook.indexOf("iv1Pos=!*");

                var intdE = strCook.indexOf("*!");
                var strdPos = strCook.substring(intdS + 9, intdE);
                document.getElementById('div1').scrollTop = strdPos;
            }

            /// This condition will set scroll position of <div> 2.
            if (strCook.indexOf("iv2Pos=!*") != 0) {
                var intdS = strCook.indexOf("iv2Pos=|*");
                var intdE = strCook.indexOf("*|");
                var strdPos2 = strCook.substring(intdS + 9, intdE);
                document.getElementById('div2').scrollTop = strdPos2;
            }
        }

    </script>

     

    <div id="div1" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90%"; onscroll="setScrollPos();">

    <asp : datagrid>

    </asp:datagrid></div>

     
    <div id="div2" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90%"; onscroll="setScrollPos();">

    <asp : datagrid>

    </asp:datagrid></div>

    Friday, April 15, 2011 1:15 AM