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/...anel-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.