Controlling Scrolling (ooh, I'm a poet)?

Last post 02-21-2007 2:32 PM by klgrube. 22 replies.

Sort Posts:

  • Controlling Scrolling (ooh, I'm a poet)?

    01-23-2007, 1:10 PM

    I have a series of cascading dropdowns inside a GridView.  For several business logic reasons, I'm not populating them using the CascadingDropdown extender, but rather using AutoPostBack and and an onSelectedIndexChanged method for each control.  The whole thing is inside an UpdatePanel.  It works beautifully.

    The GridView itself however, is inside a...

    <

    div style="overflow:auto; max-height:115px;"></div>

    ...block, because it can't grow past a certain height.  Scrollbars kick in if it grows over 115 pixels in height.  Again, works well.

    The problem arises when the user is changing a dropdown list that is at the bottom of a scrolled GridView.  Every time the user changes a value, the GridView scrolls back up to the top. It's a minor annoyance. 

    Anyone have any suggestions?

    Aaron

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-24-2007, 9:02 AM
    • Contributor
      4,580 point Contributor
    • stmarti
    • Member since 06-06-2006, 12:20 PM
    • Posts 972

    Hi,


    Move your updatepanel inside your "overflow:auto" div, after then the scroll pos is maintained during partial postbacks.

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-24-2007, 9:24 PM

    Hi,

    Thanks for the response.  That's a great idea, and makes perfect sense now that I think about it.  I can't move this particular UpdatePanel, because there's stuff all over the page that's being updated and the overflow:auto div is really small, but can I put another update panel inside my div?  i.e. can I have nested update panels?  Are there any issues about doing that that I should be aware of.

    Again, thanks for replying.

    Aaron

     

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-25-2007, 4:04 AM
    • Contributor
      4,580 point Contributor
    • stmarti
    • Member since 06-06-2006, 12:20 PM
    • Posts 972

    I'm using nested updatepanels since the spring CTPs without any problem. You could check the online doc how it works.

    An other solution for your problem to put an updatepanel around the grid, put the scrolling div around the updatepanel, and move the triggering dropdowns anywhere you whish (not needed to stay in the grid's updatepanel). If the scrolling div and the grid is hided/not required at the first request, you could also put 2nd updatepanel around the scrolling div. This config allow you that show your grid when you want, and once shown you could update only the inside up therefore scroll pos is "maintained".

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-28-2007, 1:23 PM

    Thanks again for your help.

    Interestingly enough, that didn't work for me.  Tried it both ways and the GridView still scrolls back up to the top whenever one of the dropdowns changes. 

    I also have a similar situation with a "popup" panel, which I've got a DragPanel extender and a DropShadowExtender on (not a popup extender, because its popup behavior is triggered by code, not an event).  I have it declared as

    style="position:absolute; top: 150px; left: 400px;"

    and every time someone triggers an event inside of it, even after they've moved it, it moves back to (400, 150).  I tried putting an UpdatePanel around it to no avail.

    Any ideas?  Thanks again for your help.

    Aaron 

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-31-2007, 3:55 AM
    • Contributor
      4,580 point Contributor
    • stmarti
    • Member since 06-06-2006, 12:20 PM
    • Posts 972

    Hello,

    If you have something similar (pseudo code):

    <updatepanel> 

        <div style="position:absolute; top: 150px; left: 400px; height: 200px; overflow: scroll;" runat="server" id="div1">your content</div>

    </updatepanel>

    your div will be repositioned/scrolled to top/etc. everytime when the updatepanel is triggered.

    However if you have the following:

    <div style="position:absolute; top: 150px; left: 400px; height: 200px; overflow: scroll;" runat="server" id="div1">

        <updatepanel>

            your content

        </updatepanel>

    </div>

     and your div is scrolled down or moved by a toolkit extender, the scroll position and div position won't change when the updatepanel is triggered! (Of course if you have less content the scroll position could change slightly).

    Just play further with the nesting level and css Smile

     

     

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-31-2007, 6:43 AM
    • Participant
      831 point Participant
    • Hoonius
    • Member since 07-13-2006, 12:21 PM
    • England
    • Posts 195

    I had the same problem with a gridview inside a div which had been scrolled.  Everytime i went to edit a row at the bottom of the grid, the div would scroll back top the top and i had to scroll down to get to the editable row.  The gridview and it's events worked, fine but the scroll position was a nightmare, making the user experince a bit shoddy
     

    if you just need to maintain the position of a scrolled div over an AJAX callback, i have a solution in this forum.  it uses a bit of javascript to collect the scroll positions and set them when the updatepanel has finished it's update. Check it out here, see if it's what you need.  However, i'm keen to see if smarti's solution work as it's a bit overkill for something so (seemingly) simple

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-31-2007, 10:30 AM
    • Contributor
      4,580 point Contributor
    • stmarti
    • Member since 06-06-2006, 12:20 PM
    • Posts 972
    Hoonius:

    However, i'm keen to see if smarti's solution work as it's a bit overkill for something so (seemingly) simple

    Hi I'm using this approach from the beginning (when I first dropped an updatepanel on to a page), without problem. I have a div with overflow: scroll, fixed height and with (absolute positioning not necessary of course, "server side" div also not necessary), inside that div there is the updatepanel. In that case the scroll position should be maintained by the browser during partial postbacks (when the content's "height" are similar during the postbacks, but that is true also for javascipt solutions).

    This combo works for me: extreme complex nested repeaters inside the div, treeview (yes I'm know it'is not supported by ajax Smile) inside the div. I've never tried it with a gridview, because  I'm not using that control at all.

    It works with IE6/IE7/firefox. Because the scrolling div is not manipulated by the updatepanel in my case (only it's child DOM elements are changing every postback), it would be a big browser rendering bug if it scolls to top (hopfully it not scrolls to the top, except when we have empty or less content which fit in the fixed height)

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-31-2007, 10:42 AM
    • Participant
      831 point Participant
    • Hoonius
    • Member since 07-13-2006, 12:21 PM
    • England
    • Posts 195
    stmarti:
    Hoonius:

    However, i'm keen to see if smarti's solution work as it's a bit overkill for something so (seemingly) simple

    Hi I'm using this approach from the beginning (when I first dropped an updatepanel on to a page), without problem. I have a div with overflow: scroll, fixed height and with (absolute positioning not necessary of course, "server side" div also not necessary), inside that div there is the updatepanel. In that case the scroll position should be maintained by the browser during partial postbacks (when the content's "height" are similar during the postbacks, but that is true also for javascipt solutions).

    This combo works for me: extreme complex nested repeaters inside the div, treeview (yes I'm know it'is not supported by ajax Smile) inside the div. I've never tried it with a gridview, because  I'm not using that control at all.

    It works with IE6/IE7/firefox. Because the scrolling div is not manipulated by the updatepanel in my case (only it's child DOM elements are changing every postback), it would be a big browser rendering bug if it scolls to top (hopfully it not scrolls to the top, except when we have empty or less content which fit in the fixed height)

     

    Hi smarti

    I just re-read my post and my meaning wasn't altogether clear.  I meant to say that my solution was overkill with all it's javascript and event attaching etc.  I'll give your solution a try this afternoon and let you know my results as it looks to be a much cleaner way of maintaining the divs scroll position

    Thanks for the tip :¬) 

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    01-31-2007, 10:56 AM
    • Participant
      831 point Participant
    • Hoonius
    • Member since 07-13-2006, 12:21 PM
    • England
    • Posts 195

    i can't get this to work with a GridView :¬(

    I have a gridview on a form, so i wrapped that inside an UpdatePanel and then i wrapped that up inside a div with the style attributes you specified above.  The div scrolls as you'd expect, but when i try and select or edit a row, the scroll moves back to the top of the div and i have to scroll down to get the item in view again.

    I had it like this:

    <div style="overflow:scroll">
         <UpdatePanel>
            <ContentTemplate>
             <GridView>
             </GridView>
          </ContentTemplate>
        </UpdatePanel>
    </div> 

     so my gridview is nested inside and updatepanel and that panel is nested inside a scrollable div.  Any ideas?

     


     

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    02-01-2007, 3:55 AM
    • Contributor
      4,580 point Contributor
    • stmarti
    • Member since 06-06-2006, 12:20 PM
    • Posts 972

    Hello,

    I have really no experience with the GridView control but I put together a small example just for fun. It maintains the scroll position for me.

    What it does:

    - has a simple gridview, only AutoGenerateEditButton = true is set in the codebehind

    - it is bound to an arraylist (it is not an updateable datasource, but the edit link is displayed before each row and postback if you click it)

    - each round trip I rebind the grid (it fills numbers 0-99 then you press edit it fills 99-0 and so on) just for "visualization"

    - it handles the RowEditing in the codebehind, but do nothing 

    - tested in ie6/firefox 

    Here it is, would you please check it?:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test3.aspx.cs" Inherits="ForumTest.test.test3" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
       <asp:ScriptManager ID="TheScriptManager" EnablePartialRendering="true" runat="server" />
       <p><%= "Just testing that we have partial postback :) " + DateTime.Now.ToString( )  %></p>
       <asp:Button ID="btn" runat="server" text="Independent postback from gridview just for test"/>
       <div style="overflow: scroll; height: 200px;">
            <asp:UpdatePanel id="up1" runat="server" UpdateMode="Conditional">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
                </Triggers>
                <ContentTemplate>
                        <asp:GridView ID="grid1" runat="server" />
                </ContentTemplate>
                </asp:UpdatePanel>
        </div>
            <asp:UpdateProgress runat="server" DisplayAfter="0">
                <ProgressTemplate><div style="position: absolute; top: 0; left: 0; background-color: Red;">PROGRESS</div></ProgressTemplate>
            </asp:UpdateProgress>
        </form>
    </body>
    </html>

     using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    namespace ForumTest.test
    {
        public partial class test3 : System.Web.UI.Page
        {
            private bool m_FlipState = false;

            /// <summary>
            /// Gets or sets FlipState.
            /// </summary>
            public bool FlipState
            {
                get
                {
                    return ( bool )( this.ViewState[ "m_FlipState" ] ?? m_FlipState );
                }
                set
                {
                    this.ViewState[ "m_FlipState" ] = m_FlipState = value;
                }
            }

            protected override void OnInit( EventArgs e )
            {
                this.grid1.RowEditing += new GridViewEditEventHandler( grid1_RowEditing );

                base.OnInit( e );
            }

            protected void Page_Load( object sender, EventArgs e )
            {
                System.Collections.ArrayList myList = new ArrayList( );

                if( !this.FlipState )
                {
                    for( int i = 0; i < 100; i++ )
                    {
                        myList.Add( i.ToString( ) );
                    }
                }
                else
                {
                    for( int i = 99; i >= 0; i-- )
                    {
                        myList.Add( i.ToString( ) );
                    }           
                }
               
                this.FlipState = !this.FlipState;


                this.grid1.AutoGenerateEditButton = true;
                this.grid1.DataSource = myList;

                this.grid1.DataBind( );
            }

            protected void grid1_RowEditing( object sender, GridViewEditEventArgs e )
            {
                // throw new Exception( "The method or operation is not implemented." );
            }   
        }
    }

     

     

     

     

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    02-01-2007, 4:32 AM
    • Participant
      831 point Participant
    • Hoonius
    • Member since 07-13-2006, 12:21 PM
    • England
    • Posts 195

    this definitely works my end :¬)

     

    I'll compare this code to my non-working version i made yesterday and see what i've missed.  thanks very much for the example stmarti :¬) 

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    02-18-2007, 6:48 PM
    • Member
      39 point Member
    • klgrube
    • Member since 07-12-2005, 5:51 PM
    • Posts 27

    Hi!

        I'm testing this out as well and I'll let you know how it goes.  I have exactly the same problem.  But, I do have one small suggestion, however.  Try setting the following at the top of your page source 

    <%

    @ Page MaintainScrollPositionOnPostback="true" Language . . .. . . . .

     or in the System.Web section of your WebConfig . . .

     <system.web>

    <pages maintainScrollPositionOnPostBack="true">

     . . .

    That may help.  I set this in mine and I'm going to test the above technique in just a few minutes and I'll let you know . . .

     

    Karen

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    02-18-2007, 7:21 PM
    • Member
      39 point Member
    • klgrube
    • Member since 07-12-2005, 5:51 PM
    • Posts 27

    Okay . .   I just tried adding in an update panel right between he gridview and the outer div, and Im still not able to get this to work. The scroll position still returns to the top of the grid.  I'll check some more, but so far, no luck.  Let me know if you find out anything, please.

     Thanks!

  • Re: Controlling Scrolling (ooh, I'm a poet)?

    02-19-2007, 5:32 AM
    • Participant
      831 point Participant
    • Hoonius
    • Member since 07-13-2006, 12:21 PM
    • England
    • Posts 195

    i did it was in isolation to my main project.  My current project uses masterpages and wraps the contentplaceholder inside an UpdatePanel, os i wrapped the UpdatePanel in a div as suggested by stmarti but the scroll position is lost when the page performs a callback.

    I've reverted back to my javascript solution with a few tweaks, which i will post later today

Page 1 of 2 (23 items) 1 2 Next >