Scroll to specific spot in gridview : The Official Microsoft ASP.NET Forums

Reply

mandrews1234

Member

335 Points

Scroll to specific spot in gridview

Jan 06, 2012 06:36 PM|LINK

I have a gridview that sits in a fixed height panel. If there are more items, then it scrolls. I have a checkbox and an asp textbox that both do some autopostback work. The problem I have, is if you scroll and then enter text in the box or check the checkbox, the div scrolls back to the top. I tried writing some custom JS to do this but have been at it for a couple hours with no luck. Does anyone have any ideas about how to do this? Please note I can not use the Webforms.PageRequestManager object. Here's what my gridview looks like. I'm trying to set the scroll position of the div to the specific panel called scrollHolder. I know how to pass the client id of that div to JS, I just don't know how to calculate the scroll. Thanks,

<asp:panel id="tracks" runat="server" class="tracksClass">
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TrackId"
                            BorderStyle="None" GridLines="None" CellPadding="5" RowStyle-HorizontalAlign="Center" Width="210px" >
                            <RowStyle CssClass="myRow" Height="130px" />
                            <FooterStyle CssClass="noRow" />
                            <Columns>
                                <asp:TemplateField HeaderText="">
                                    <ItemTemplate>
                                        <asp:Panel ID="scrollHolder" runat="server"></asp:Panel>
                                        <asp:CheckBox ID="soldCheck" runat="server" OnCheckedChanged="checkSoldChecked" AutoPostBack="true"
                                        CssClass="trackCheckBox" />
                                        <asp:Label ID="trackOutput" runat="server" Text='<%# Eval("trackText") %>'></asp:Label>
                                        <asp:label ID="dollarSign" runat="server" Text="$ " CssClass="trackText"></asp:label>
                                        <asp:TextBox ID="perAcreInput" runat="server" OnTextChanged="acrePriceChange" AutoPostBack="true"
                                        CssClass="acreTextBox" ></asp:TextBox><asp:Label ID="acreTextLabel" class="trackText" runat="server" > / acre</asp:Label><br />
                                        <asp:Label ID="totalCost" runat="server" Text="$0" CssClass="trackText"></asp:Label>
                                        <asp:Label Visible="false" ID="myTrackId" runat="server" Text='<%# Eval("TrackId") %>'></asp:Label>
                                        <asp:Label Visible="false" ID="acresHolder" runat="server" Text='<%# Eval("acres") %>'></asp:Label>
                                        <asp:Label Visible="false" ID="ownersHolder" runat="server" Text='<%# Eval("owners") %>'></asp:Label>
                                        <asp:Panel ID="soldPanel" CssClass="soldPanelClass" Visible="False" runat="server">
                                            <img src="images/sold.png" />
                                        </asp:Panel>
                                        <div id='soldDiv<%# Eval("TrackId") %>' class="soldPanelClass" style="visibility: hidden;">
                                            <img src="images/sold.png" />
                                        </div>

                                        
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>

Reply

MetalAsp.Net

All-Star

112754 Points

18375 Posts

Moderator

Re: Scroll to specific spot in gridview

Jan 06, 2012 06:57 PM|LINK

This jQuery plugin looks promising: http://code.google.com/p/m-jq-projects/downloads/detail?name=restoreScrollPosition-1.0.jquery.min.js&can=2 (be sure to read the wiki).

C# <--> VB.Net Translator | jQuery Widgets

Reply

Allen Li - M...

Star

10411 Points

1196 Posts

Re: Scroll to specific spot in gridview

Jan 09, 2012 11:06 AM|LINK

Hi, to access the client id of web controls, we can use the following method:

webcontrol.clientID

You can try the following method to store the panel scrollbar position and retrieve them when the page is posted back.

 protected void Page_Load(object sender, EventArgs e)
        {
            HandlePanelScrolBar();
        }

        private void HandlePanelScrolBar()
        {
            HiddenField HF_ScrollPosX = new HiddenField();
            HiddenField HF_ScrollPosY = new HiddenField();

            HF_ScrollPosX.ID = "ScrollPosX";
            HF_ScrollPosY.ID = "ScrollPosY";
            form1.Controls.Add(HF_ScrollPosX);
            form1.Controls.Add(HF_ScrollPosY);

            string script;
            script = "window.document.getElementById('" + HF_ScrollPosX.ClientID + "').value = "
                      + "window.document.getElementById('" + Panel1.ClientID + "').scrollLeft;"
                      + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value = "
                      + "window.document.getElementById('" + Panel1.ClientID + "').scrollTop;";

            this.ClientScript.RegisterOnSubmitStatement(this.GetType(), "SavePanelScroll", script);

            if (IsPostBack)
            {
                script = "window.document.getElementById('" + Panel1.ClientID + "').scrollLeft = "
                        + "window.document.getElementById('" + HF_ScrollPosX.ClientID + "').value;"
                        + "window.document.getElementById('" + Panel1.ClientID + "').scrollTop = "
                        + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value;";

                this.ClientScript.RegisterStartupScript(this.GetType(), "SetPanelScroll", script, true);
            }
        }

Please change “Panel1”to your Panel ID.

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Edited by Allen Li - MSFT on Jan 09, 2012 11:07 AM

Reply

mandrews1234

Member

335 Points

579 Posts

Re: Scroll to specific spot in gridview

Jan 09, 2012 06:41 PM|LINK

I tried your code in my site but don't seem to get it to work any ideas why? I don't see any errors from the JS console. Here's what I have

<asp:Panel id="tracks" runat="server" class="tracksClass">
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TrackId"
                            BorderStyle="None" GridLines="None" CellPadding="5" RowStyle-HorizontalAlign="Center" Width="210px" >
                            <RowStyle CssClass="myRow" Height="130px" />
                            <FooterStyle CssClass="noRow" />
                            <Columns>
                                <asp:TemplateField HeaderText="">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="soldCheck" runat="server" OnCheckedChanged="checkSoldChecked" AutoPostBack="true"
                                        CssClass="trackCheckBox" />
                                        <asp:Label ID="trackOutput" runat="server" Text='<%# Eval("trackText") %>'></asp:Label>
                                        <asp:label ID="dollarSign" runat="server" Text="$ " CssClass="trackText"></asp:label>
                                        <asp:TextBox ID="perAcreInput" runat="server" OnTextChanged="acrePriceChange" AutoPostBack="true"
                                        CssClass="acreTextBox" ></asp:TextBox><asp:Label ID="acreTextLabel" class="trackText" runat="server" > / acre</asp:Label><br />
                                        <asp:Label ID="totalCost" runat="server" Text="$0" CssClass="trackText"></asp:Label>
                                        <asp:Label Visible="false" ID="myTrackId" runat="server" Text='<%# Eval("TrackId") %>'></asp:Label>
                                        <asp:Label Visible="false" ID="acresHolder" runat="server" Text='<%# Eval("acres") %>'></asp:Label>
                                        <asp:Label Visible="false" ID="ownersHolder" runat="server" Text='<%# Eval("owners") %>'></asp:Label>
                                        <asp:Label Visible="false" ID="scrollHolder" runat="server" Text='<%# Eval("scroll") %>'></asp:Label>
                                        <asp:Panel ID="soldPanel" CssClass="soldPanelClass" Visible="False" runat="server">
                                            <img src="images/sold.png" />
                                        </asp:Panel>
                                        <div id='soldDiv<%# Eval("TrackId") %>' class="soldPanelClass" style="visibility: hidden;">
                                            <img src="images/sold.png" />
                                        </div>

                                        
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>

    protected void Page_Load(object sender, EventArgs e)
    {

        //set the scroll of the tracks div
        HandlePanelScrolBar();

 private void HandlePanelScrolBar()
    {
        HiddenField HF_ScrollPosX = new HiddenField();
        HiddenField HF_ScrollPosY = new HiddenField();

        HF_ScrollPosX.ID = "ScrollPosX";
        HF_ScrollPosY.ID = "ScrollPosY";
        form1.Controls.Add(HF_ScrollPosX);
        form1.Controls.Add(HF_ScrollPosY);

        string script;
        script = "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value = "
                  + "window.document.getElementById('" + tracks.ClientID + "').scrollLeft;"
                  + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value = "
                  + "window.document.getElementById('" + tracks.ClientID + "').scrollTop;";

        this.ClientScript.RegisterOnSubmitStatement(this.GetType(), "SavePanelScroll", script);

        if (IsPostBack)
        {
            script = "window.document.getElementById('" + tracks.ClientID + "').scrollLeft = "
                    + "window.document.getElementById('" + HF_ScrollPosX.ClientID + "').value;"
                    + "window.document.getElementById('" + tracks.ClientID + "').scrollTop = "
                    + "window.document.getElementById('" + HF_ScrollPosY.ClientID + "').value;";

            this.ClientScript.RegisterStartupScript(this.GetType(), "SetPanelScroll", script, true);
        }
    }//HandlePanelScrolBar

Reply

sushanth009

Contributor

6243 Points

1168 Posts

Re: Scroll to specific spot in gridview

Jan 09, 2012 09:00 PM|LINK

Try this approach. Enclose the Gridview in a Div and then write the Onscroll function for it. Calculate the value when scrolled in a Hidden field and Retrieve it after postback. The code look like this..

<input type="hidden" id="hdnScrollTop" runat="server" value="0" />
<asp:Panel id="tracks" runat="server" class="tracksClass">
<div id="divScroll" style="height: 555px; width: 100%; overflow-y: scroll; overflow-x: hidden;"
                                    onscroll="$get('<%= this.hdnScrollTop.ClientID %>').value = this.scrollTop;">
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  >
  </asp:Gridview>

</asp:Panel>

<script type="text/javascript">

  function pageLoaded(sender, args) {

            if (postbackElement.id.toLowerCase().indexOf('gridview1') > -1) {
                $get("divScroll").scrollTop = $get('<%= this.hdnScrollTop.ClientID %>').value;
            }

</script>

Try and see if this approach works for you..

Edited by sushanth009 on Jan 09, 2012 09:01 PM

Reply

mandrews1234

Member

335 Points

579 Posts

Re: Scroll to specific spot in gridview

Jan 09, 2012 09:04 PM|LINK

Ok people, I finally got it. Here's what I did. I created a colum to store the scroll position. I tried using a session variable, but it was acting funny. Then, you create a JS function to handle the scroller. I used some ajax code to call a seperate file that stores this scroll position in the database

function setScrollPosition() {
            
            var s = document.getElementById("tracks").scrollTop;
            sendAjaxRequest(s);

        } //setScrollPosition

 var ajaxRequest;
        // Script block to ping the server and get an AJAX request. 
        function sendAjaxRequest(amount) {
            ajaxRequest = new XMLHttpRequest();
            ajaxRequest.onreadystatechange = HandleResponse;
            ajaxRequest.open("GET", "SessionManager.aspx?scroll="+amount, true);
            ajaxRequest.send(null);
        }

        //Function which handles the AJAX response.!!! Sandeep 
        function HandleResponse() 
        { 
            if (ajaxRequest != undefined && ajaxRequest != null) 
            { 
         
            } 
            else if ((ajaxRequest.readyState == 4) && (ajaxRequest.status != 200)) 
            { 

            }

        } //handle response

In the page load of SessionManager.aspx I update the database to Request.QueryString["scroll"];

That effectively saves the scroll position. Make sure you put some code in to handle resetting it if the page is loaded fresh again.

Now, set the onscroll attribute in your div. This will make that JS function whenever you scroll in the div.

...gridview here

</div>

Create this JS function

function setPosition(amount) {
            document.getElementById('tracks').scrollTop = amount;
            
        }//setPosition

Then call it in your code behind in the page load

//select all of the data for this sale
        String sql = "SELECT scrollPos FROM ScrollPos";
        using (SqlConnection myconn = new SqlConnection(conn))
        {
            myconn.Open();
            SqlCommand cmd = new SqlCommand(sql, myconn);
            SqlDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "scroller",
                                           "<script type=\"text/javascript\">setPosition('" + reader["scrollPos"] + "');</script>", false);
            }//while reader.read

        }//using

I hope this helps someone.

Marked as answer by Allen Li - MSFT on Jan 12, 2012 08:10 AM

Reply

harveyvasque...

Member

478 Points

144 Posts

Re: Scroll to specific spot in gridview

Jan 10, 2012 01:56 AM|LINK

<div>i think achor can be the easiest way to be solve this</div> <div>look at this article for further explanation what is an "anchor" </div> <div>http://www.hypergurl.com/anchors.html</div>

Please mark this reply as answer if it helps you. Thanks!HARVEY VASQUEZ Developer and Application Engineer

Edited by harveyvasquez24 on Jan 10, 2012 01:56 AM

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: Scroll to specific spot in gridview

Jan 10, 2012 04:15 AM|LINK

Hi,

You can try someting like below-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
        function setPosition() {
            document.PanelTop = document.getElementById('<%=Panel1.ClientID %>').scrollTop;
        }
        function pageLoad() {
            document.getElementById('<%=Panel1.ClientID %>').scrollTop = document.PanelTop;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Panel ID="Panel1" runat="server" Style="height: 200px;overflow:auto" onscroll="setPosition()">
                <div style="height: 300px; width: 500px;">
                    <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
                </div>
                <div style="height: 300px; width: 500px;">
                    <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button1_Click" />
                </div>
                <div style="height: 300px; width: 500px;">
                    <asp:Button ID="Button3" runat="server" Text="Button3" OnClick="Button1_Click" />
                </div>
                <div style="height: 300px; width: 500px;">
                    <asp:Button ID="Button4" runat="server" Text="Button4" OnClick="Button1_Click" />
                </div>
                <div style="height: 300px; width: 500px;">
                    <asp:Button ID="Button5" runat="server" Text="Button5" OnClick="Button1_Click" />
                </div>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Scroll to specific spot in gridview RSS

7 replies

mandrews1234

Scroll to specific spot in gridview

MetalAsp.Net

Re: Scroll to specific spot in gridview

Allen Li - M...

Re: Scroll to specific spot in gridview

mandrews1234

Re: Scroll to specific spot in gridview

sushanth009

Re: Scroll to specific spot in gridview

mandrews1234

Re: Scroll to specific spot in gridview

harveyvasque...

Re: Scroll to specific spot in gridview

asteranup

Re: Scroll to specific spot in gridview

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft