Scrollbar position updatepanel ASP.NET AJAX

[btreddy]

Hii all,
In one my child page i've an updatepanel which contains a gridview .The gridview displays huge amt of data (~3 pages of data) and the updatepanel refreshes for every 1 sec,for tht i've used timer control, to get the updated data from the server.for that i've used one timer.

The problem is ,the webpages scroll bar(both horizontal and vertical) is repositioning to the starting position after every refresh.

<asp:Timer ID="TimerSystem" runat="server" OnTick="OnTick_TimerSystem" Interval="2000">
    </asp:Timer>
<asp:UpdatePanel ID="UpnlSystem" runat="server" UpdateMode="Conditional">
        <triggers>
              <asp:AsyncPostBackTrigger ControlID="TimerSystem" EventName="Tick" />
        </triggers>
        <contenttemplate>
            <asp:GridView ID="GridViewSystem" runat="server" CellPadding="4DataSourceID="SystemCounterOds">    
                   
            </asp:GridView>         
                       
        </contenttemplate>
    </asp:UpdatePanel>

This is what the code ...

Can anybody kindly tell me why this scrollbar refreshing is happening .

Thanks in advance..
Rgds,
BTR.

[Frinavale]

I don't think there's anything out there that will fix this problem.

You could create an Ajax Enabled Server Control that inherits from the ASP.NET Panel class which has a style of overflow:scroll and tracks the scroll position between postbacks.

If you're interested I could give you a hand with this.
It's fun :)

[btreddy]

Thanks for the reply Frinavale.

How are you n how are you doing?

Hey please tell me how to do that one ,coz in almost 3 forms im facing the same problem ..

Requesting you kindly give me the solution or guide me in this regards.

Thanks in advance..

Rgds,
BTR.

[btreddy]

Hey i found one reference link while seraching on the net . below is the link ..

http://basgun.wordpress.com/2008/06/09/maintain-scroll-position-updatepanel-postback/

i tried this one but it did work for me...but in the same manner if we're able to find the reference to the browser window..so that the scroll positions of the browser window....and after tht we can follw the same approach mentioned in the article at above link.

what do you say Frinavale... will this works for us or not.OR is thr any better approach .

Thank you ,

Rgds,
BTR.

[btreddy]

<script type="text/javascript">
    var xPos,yPos;
    var prm=Sys.WebForms.PageRequestManager.getInstance();
    
    prm.add_beginRequest(BeginRequest);
    prm.add_endRequest(EndRequest);  
    
    function BeginRequest(sender,args)
    {
     xPos=document.body.scrollLeft;
     yPos=document.body.scrollTop;
    }
    function EndRequest(sender,args)
    {
      document.body.scrollLeft=xPos;
      document.body.scrollTop=yPos;
    }
    
    </script>

Hey im using this code to get the scroll positions of the browser window .

But this is not working for me ,some where it went wrong..

Can anybody telle me, Is there any other way to get the scroll positions of the browser window in Javascript.

Thank you...

BTR.

[Frinavale]

This isn't exactly what I was talking about but you're on the right track. You need to get the scroll position of the Panel element that your content is within, not the scroll position of the document.body element.

You should use something like the following (please see comments for an explanation of what I'm doing and why):

<script type="text/javascript">
    var xPos,yPos;
    var prm=Sys.WebForms.PageRequestManager.getInstance();
 
    prm.add_beginRequest(BeginRequest);
    prm.add_endRequest(EndRequest);  
 
    function BeginRequest(sender,args)
    {
     //You need to grab a reference to the Panel client side 
     //in this function.
     //The ID of the Panel in the browser is made available 
     //to you in ASP.NET through the Panel's ClientID property.
     //So, you need to use Response.Write to write the
     //ClientID of the Panel into the JavaScript Function.

     //A short hand, ASP call to the Response.Write 
     //method is <%= %>

     //To get a reference to the Panel client side you can use 
     //the JavaScript method: document.getElementByID:
     //For example:
     //var contentPanel = document.getElementID("<%=myPanel.ClientID %>");
     
    //The .NET Ajax framework has made this a little easier by
    //providing a $get() method.

     var contentPanel = $get("<%=myPanel.ClientID %>");
     xPos=contentPanel.scrollLeft;
     yPos=contentPanel.scrollTop;
    }
    function EndRequest(sender,args)
    {
      //Same thing here, you need to set the Panel's scroll:
      var contentPanel = $get("<%=myPanel.ClientID %>");
      contentPanel.scrollLeft=xPos;
      contentPanel.scrollTop=yPos;
    }
 
    </script>

[btreddy]

Hiii ,

I tried this one here ..its working fine....but one kind of jerk is coming in the position of scrollbar...whi ch is not suppose to come and irritating .

Below is the code

script type="text/javascript">
    var xPos1,yPos1;
    var prm=Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(pageLoaded);
    prm.add_pageLoading(pageLoadingHandler);
    function pageLoaded(sender,args)
    {
    //window.scrollTo(xPos1,yPos1);
    document.documentElement.scrollLeft=xPos1;
    document.documentElement.scrollTop=yPos1;
    }
    function pageLoadingHandler(sender,args)
    {
    xPos1=document.documentElement.scrollLeft;
    yPos1=document.documentElement.scrollTop;
    }
    </script>

[Frinavale]

Hmmm, have you considered fading out the content and displaying a message like "processing " or something while the page is updating?

Then when it comes back, fade it back in?

I didn't realize you were scrolling the whole page, I thought it was just a section of it.

Does it really jerk?
Or do the scroll bars just reposition?
(that's what my panel does sometimes...not in every browser)

[btreddy]

Hey hii Frinavale,

I changed the code and did whatever you were telling .....like i placed the update panel which contains a gridview in one of the panel .

Now instead of tracking the scrollbar positions of the browser i'm getting the scrollbar positions of the panel and its working fine..but with one small problem.

The verticle scrollbar is going to the zero position and coming back to the prev position where it was before refresh .. and surprisingly this is not happening with the horizontal one...:).Below is the code part.

var xPos1,yPos1;
    
    var prm=Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoading(pageLoadingHandler);
    prm.add_pageLoaded(pageLoaded);
      function pageLoaded(sender,args)
    {

    $get('<%=contentPanel.ClientID %>').scrollLeft=xPos1;
    $get('<%=contentPanel.ClientID %>').scrollTop=yPos1;
     }
    function pageLoadingHandler(sender,args)
    {       
    xPos1=$get('<%=contentPanel.ClientID %>').scrollLeft
    yPos1=$get('<%=contentPanel.ClientID %>').scrollTop;
    }

who is telling to this vertical scrollbar to go back to zero position and come back.?

Rgds,
BTR.

[Frinavale]

I haven't actually done the vertical scroll position so I was unaware that the scroll is noticeable.

What's happening is that portion of the page is being sent to the server.
When that portion is sent back to the browser it is rendered with the top of the content being at the top of the panel....your JavaScript scrolls the content so that it is at the same position as before.


I'm not sure how to get around this.
That "updating" message I suggested earlier might be a good idea. It could hide the content until it's finished loading and repositioned.

[Frinavale]

I just noticed that my horizontal scroll solution was doing the same thing in IE8 (a "jerk" effect was happening).

To fix it I set the visibility style of the Panel to visibility=hidd en and after the scroll position is reset, I set the visibility style to visibility=visi ble.

I found it worked nicely for IE8 but then testing in IE7 proved to be kind of nasty (when a GridView is in the panel...the visibility doesn't hide the grid lines for some weird reason).

So, to fix this I set the display style of the panel to none by default. Then in the script I set the visibility to hidden, then set the display to block, then set the scroll position, then set the visibility to visible. The reason I did this is because you can't set the scroll position of a <div> (panel) that has a display:none style.

It's not quite so nice in IE7 as it is in IE8 because IE7 is slower to load things...so the process is noticeable.

I'm looking into this further later.

Try it out on your project and let me know if you find a smoother solution to the problem.

-Frinny

[btreddy]

Hiiiii,

Thanks frinny for your reply.

The above is not working for me...

below is my code

asp:Timer ID="TimerSystem" runat="server" OnTick="OnTick_TimerSystem" Interval="3000">
    </asp:Timer> 
    <asp:ObjectDataSource ID="SystemCounterOds" runat="server" TypeName="SystemServiceCounters"
                SelectMethod="SelectByInstance">               
            </asp:ObjectDataSource>
            
   <asp:UpdatePanel ID="UpnlSystem" runat="server" UpdateMode="Conditional" >
        <triggers>
              <asp:AsyncPostBackTrigger ControlID="TimerSystem" EventName="Tick" />
        </triggers>
        <contenttemplate>       
        <asp:Panel ID="contentPanel" runat="server" ScrollBars="Both" Width="1025px" Height="780px">
            <asp:GridView ID="GridViewSystem" runat="server" CellPadding="4" ForeColor="#333333" 
                           ShowFooter="False" CssClass="grid"
                           DataSourceID="SystemCounterOds"
                           AllowSorting="True" EnableViewState="false">
                          <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                          <EditRowStyle BackColor="#999999" />
                          <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                          <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="Black" />
                          <EditRowStyle cssClass="updating" /><%--BackColor="#999999" />--%>
                          <PagerStyle cssClass="pager"  />
                          <RowStyle CssClass="row" />
                          <AlternatingRowStyle CssClass="altrow" />
            </asp:GridView>         
        </asp:Panel>
       </contenttemplate>
    </asp:UpdatePanel>

This is what my code is.. evrythng is fine ..except tht verical scrollbar is going to ZERO and coming back to the restored value... thats what user can feel a kind of jerk in the screen.

I tried setting the page attribute "MaintainScrool lPositionsOnPos tback" but it was also didn work for me ...if i remove the update panel that time it was working fine...(may be this attribute is not compatible with AJAX).

So i tried all most all the possibilities.. .what more...frinny?

Rgds,
BTR.

[Frinavale]

What I recommended was to do the following...

First set the style of the Panel to visibility:hidd en:

<asp:Panel ID="contentPanel" runat="server" style="overflow:auto; visibility:hidden; width:1025px; height="780px">

Then in your JavaScript set the panel's visibility style to "visible" in your JavaScript:

var xPos1,yPos1;
    
    var prm=Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoading(pageLoadingHandler);
    prm.add_pageLoaded(pageLoaded);

    function pageLoaded(sender,args)
    {
        $get('<%=contentPanel.ClientID %>').scrollLeft=xPos1;
        $get('<%=contentPanel.ClientID %>').scrollTop=yPos1;
        $get('<%=contentPanel.ClientID %>').style.visibility = "visible";
     }
    function pageLoadingHandler(sender,args)
    {       
        xPos1=$get('<%=contentPanel.ClientID %>').scrollLeft
        yPos1=$get('<%=contentPanel.ClientID %>').scrollTop;
    }

The only problem I'm having with this solution is that IE7 shows GridView grid lines even if the panel is invisible.....a nd the content "blinks".

I'm looking into a better solution today.

[Frinavale]

I cannot think of a way around this.

I was thinking that maybe we could set the scroll position before the content is loaded in the panel.

I thought that I could place the content in another panel within the scrollable panel and that I could call the function that sets the scroll values before the inner panel loads.

But according to this article on the scrollLeft() method you cannot set the scroll value larger than the content of the <div> (panel)...it'll just set it to the maximum width of the <div>...and since the height and width would be 0 at that point the scrollTop and scrollLeft position would be set 0.

I have no idea how to fix this.

(I've asked the JavaScript experts to help us out.)

[truezplaya]

apparantly there is some sort of bug in .net framework 3.5 if you download the sp1 for this framwork it should be resolved, This is what i read on the tinterweb a while back i would reference but can't remember the site.