ASP.NET AJAX UI

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

klgrube — Wed, 21 Feb 2007 19:32:05 GMT

Yes, thank you. I did try that and it still isn't working.

Karen

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

jmaag — Wed, 21 Feb 2007 18:37:33 GMT

klgrube:
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

Isn't MaintainScrollPositionOnPostback specific to the page scroll bars themselves? I'm not sure this would work, but definitely something interesting to try.

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

klgrube — Wed, 21 Feb 2007 18:24:02 GMT

Thanks! You're right, and I actually do have my own post on this matter: Sorry about the misspelling in the title, but here's the name of the post. I've just added some code that shows the unwanted scrolling behavior really clearly . . . I hope that helps. Here's the title of my post:

Maintin scroll position in gridview with fixed header panel on select/edit

Feel free to take a look and see if you can get it to work. I'll gladly award points and all of that. That would be cool!

Thanks!

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

Hoonius — Wed, 21 Feb 2007 09:15:06 GMT

Karen

i'm not even sure you could use getElementByID in CSS. it uses the DOM rather than full-blown javascript so i've been working the object out in relation to it's parentNode

Cells to Rows to Tables to Containers etc, up the tree till is get the control i want to be next to. Also, due to the fact you're using master pages, a control's ID in .net isn't the controls ID on the browser because .net wraps it up in ContetnPlaceholder001_SomeOtherJibWrapper003_YourOriginalID so youi'll have a hard time trying to reference a control by ID anyway i think.

Also, maybe people are reluctant to post on this thread for because you'll not be able to award points as it's someone else's thread. I've no problem, as you can see, but i think it's weird that nobody else has even commented to date. who knows

I can PM you a link of my current app on the test server so you can see what i mean by Fixed Table Header in a div which saves the scroll position. i can't post the link publically however but i guess one or two extra hits isn't gonna break the bank :¬)

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

stmarti — Wed, 21 Feb 2007 08:24:57 GMT

Hi Karen,

I have some tips, but I think there is no easy solution for you. You can try:

- For the id problem you could try

document.getElementById( '<%= yourcontrol.ClientID %>' ) ... or similar.

See the docs what is the ClientID property, if you never used that.

/ document.getElementbyID , hope that is only typos in your post /

- You can get info how or where to place the scroll maintain javascript in the suggestion in this therad (see Hoonius' post)

- There is tons of css and other solution for a fixed th in a table, I've never use them because of the css and other hacks. Maybe you can put a dummy (empty) gridview before the updatepanel? Or use a repeater to render your grid, it's hard work but you have total control also.

- For the general scroll maintain problem you could try one of the javascript solution or the surrounding div on this thread, but first try to simplify your page: try it without masterpage/multiview etc. This is pain, but maybe the only way to detect the source of your scroll problem.

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

klgrube — Tue, 20 Feb 2007 16:34:23 GMT

Hi!

The whole point of all of this is to keep the gridview's header in a fixed position while the remainder of the grid is scrollable. When the gridview is rendered in the html, it is rendered as a table. It is the settings in the 'th' style that keep the header rows of the gridview displayed when you scroll within the panel or div. This combination of the 'th' style, which is used by the gridview when it is rendered, and the 'fixedHeader' style for the panel works as long as you don't hit any key that causes a postback, like the 'edit' button. For some reason, the gridview gets completely re-rendered on postback, and either the header disappears, if the panel is outside of the update panel, or the scroll position returns to the top of the panel, if the panel is inside of the update panel. Neither of these is acceptable.

All I want to do is keep the gridview header displayed when the person scrolls down inside the panel. And, I want to KEEP the header displayed and leave the scrollbar on the edited or selected row when the user hits the 'edit' button! Think of it like a frozen window in Excel, where the header row does't move.

So, what I'm looking for here is a way to return the scroll position within the panel to the row it was on when the person hit the 'edit' button, that is after postback. I've tried setting focus on the edited row. That doesn't work. I've tried several javascript solutions, none of which works yet. And yes, I do have maintain scrollpositiononpostback set!!!! The best I can get is the scrollbar returning to the top of the panel and the user having to scroll back down to find their edited row. Here's what may be complicating the situation:

First of all, I'm using master pages, and yes I have an instance of scriptmanager in the master page. The panel, update panel and gridview are all on the content page. And, the gridview, update panel, and panel are all located inside the first view of a multiview.

For some reason, I'm not able to correctly tell any javascript solution how or where to locate the panel control. I'm not able to reference that control for some reason within the javascript. No matter how I try to reference it, by using document.getElementbyID or even by directly trying to hard code it in, nothing works. I always get an 'empty or does not exist' javascript error. I just can't seem to figure out how to reference that panel control, located as it is on the content page and inside the multiview. I think if I can do that, a javascript solution may work. Truthfully though, I'm not even sure where to place the javascript on a content page. Do I put it right below the 'content' starting tag? That seems to work, though I do get that javascript error where it can't find the pane control. And yes, I've tried using a div instead of a panel, with the same result. How do I reference the panel control, assuming it is called 'Panel1', within javascript on a content page like this?

Any additional thoughts or possible solutions? And no, paging is not a solution. My users hate paging. Even with the update panel. paging takes forever and isn't a decent option.

Thanks!
Karen

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

stmarti — Tue, 20 Feb 2007 08:59:34 GMT

Hi Karen,

I modified your pseudo code similar to my app's layout:

<asp:Panel id="headerPanel" runat="server">Header content</asp:Panel>
<asp:Panel id="scrollablePanel" class="fixedheader" runat="server">
    <asp:UpdatePanel>
       <ContentTemplate>
           <Gridview>
           </Gridview>
        </ContentTemplate>
    </asp:UpdatePanel
</asp:Panel>

I don't know what for this:

table th
{
   border-width: 4px;
   border-color: Black;
   background-color: Gray;
   position: relative;
   top: expression(this.parentNode.parentNode.
                   parentNode.scrollTop-1);
}

but probably unnecessary, and not valid css at all.

"But, when I put the Panel inside of the Update Panel, the scroll returns to the top of the gridview"

This is normal because the scrolling div is recreated each partial postback, therefore it "scrolls" to top.

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

klgrube — Mon, 19 Feb 2007 23:08:12 GMT

Please help!! I'm getting really desperate here, and actually more than a little upset.

ALL I WANT TO DO (she screams) . . . . .

Is have gridview with a fixed header where everything below the header scrolls. I know how to do that using a panel per Paul Kimmel's article at http://www.developer.com/net/asp/article.php/3585911. This works fine as long as you don't have an edit button on the gridview.

BUT I want the header to stay where it is and the scroll position of the rest of the gridview to NOT change its place when a user hits the 'Edit' button!!! Is that too much to ask? Gee . . a fixed header gridview that DOESN'T lose the scroll position of the selected or edited row. What a concept. I've found references to each of these ideas separately, but never found a combined solution.

How do I accomplish that?

So . . . right now I have a panel that has the following styles associated with it

.fixedHeader
{
   overflow: auto;
   height: 350px;
}
table th
{
   border-width: 4px;
   border-color: Black;
   background-color: Gray;
   position: relative;
   top: expression(this.parentNode.parentNode.
                   parentNode.scrollTop-1);
}

and a page that looks kind of like . . .

<asp:Panel class="fixedheader">
    <asp:UpdatePanel>
       <ContentTemplate>
           <Gridview>
           </Gridview>
        </ContentTemplate>
    </asp:UpdatePanel
</asp:Panel>

When I have the fixedHeader Panel on the outside of the UpdatePanel and the user hits the Edit button, the gridview retains its scroll position but the fixed header disappears after postback. But, when I put the Panel inside of the Update Panel, the scroll returns to the top of the gridview. I really don't know what to do!!! I don't know how to tell the Update panel that it's inside of a fixed header panel!!!!

Please help! I've literally been struggling with this for DAYS!!!!!

Karen

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

Hoonius — Mon, 19 Feb 2007 10:32:37 GMT

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

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

klgrube — Mon, 19 Feb 2007 00:21:10 GMT

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)?

klgrube — Sun, 18 Feb 2007 23:48:01 GMT

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>

. . .

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)?

Hoonius — Thu, 01 Feb 2007 09:32:23 GMT

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)?

stmarti — Thu, 01 Feb 2007 08:55:56 GMT

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)?

Hoonius — Wed, 31 Jan 2007 15:56:33 GMT

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:

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)?

Hoonius — Wed, 31 Jan 2007 15:42:43 GMT

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 ) 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 :¬)