Scroll to top only when a new page of a gridview is selected

Question

0.00/5 (No votes)

See more:

Hi,

I have an UpdatePanel and, in the ContentTemplate, I have a gridview inside a div, that is inside a panel:

ASP.NET

<asp:Panel ID="pnl" runat="server">
<div style="overflow: auto; width: 1354px; height: 420px;" id="divScroll">
<asp:GridView ID="gv" runat="server" ...>
</asp:GridView>
</div>
</asp:Panel>

The div ha an Id because I want to save the vertical scrollbar position when the user selects a row of the gridview (I used a javascript as in "Maintain GridView Scroll Position and Header Inside UpdatePanel" article).
My concern is now the following: when the grid is paged and the user selects a page, how can I reset the vertical position of the scrollbar of the div? Now, the position remains at the bottom of the grid, that's where the page selection is; I'd like that the user could change the page and start viewing the grid content from the first line of the new page of the grid.
I tried to work on the Gridview.PageIndexChanged event, but I don't know what to do exactly... Any ideas?
Thanks in advance!

Posted 11-Feb-13 23:34pm

aswork

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bandi Ramesh · Answer 1 · 2013-02-12T02:32:00

Solution 1

On the Gridview.PageIndexChanged event, add this code

C#

pnl.Focus();

Posted 12-Feb-13 2:32am

Bandi Ramesh

Comments

aswork 12-Feb-13 8:45am

Thank you for your reply! This doesn't completely solve the problem: I tried this, but the scrollbar doesn't go to the very top and a part of the gridview header remains hidden.

Bandi Ramesh 12-Feb-13 8:50am

try both these statements
pnl.Focus() and gv.Focus()

aswork 12-Feb-13 10:53am

Thanks again. I tried and I obtain the same behaviour in all the following cases:
-) pnl.Focus() alone;
-) gv.Focus() alone;
-) pnl.Focus() and gv.Focus() together (also in reverse order);
-) gv.HeaderRow.Focus();
-) setting the div runat="server" and div.Focus();

I don't know if this helps, but in the HeaderTemplate of the grid, I have three divs and the above solutions seem to set the focus only on the last one (the one with class="headerGridButton"):

<div class="headerGridLabel">
<asp:Label ID="lblHT07" runat="server" Text="Divi.">
</div>
<div style="clear: both;">
</div>
<div class="headerGridButton">
<asp:LinkButton ID="lnkHTDESC07" runat="server" OnClick="lnkOrder_Click" CommandArgument="FIELD;DESC">
<asp:Image ID="imgHTDESC07" runat="server" ImageUrl="~/Img/Up.gif" />

<asp:LinkButton ID="lnkHTASC07" runat="server" OnClick="lnkOrder_Click" CommandArgument="FIELD;ASC">
<asp:Image ID="imgHTASC07" runat="server" ImageUrl="~/Img/Down.gif" />

</div>

Bandi Ramesh 12-Feb-13 11:08am

seems you are setting focus inside the gridview header template, set the focus on any server tag above the gridview but don't set focus inside the gridview

aswork 13-Feb-13 8:32am

It seems not to work: if the tag is outside the grid, the scrollbar doesn't reset or it resets but leaving the gridview header half hidden. I noticed that, if I set the focus on a data row (for ex. gv.Rows[4].Focus()), the data row is correctly displayed at the top of the panel, but half is hidden, as it happens for the headerrow. I am wondering what makes this happen...

Bandi Ramesh 13-Feb-13 22:12pm

ummm....... the issue may be with the UpdatePanel... give it a try playing with your UpdatePanel...