Click here to Skip to main content
11,412,516 members (66,065 online)
Click here to Skip to main content

Maintain GridView Scroll Position and Header Inside UpdatePanel

, 18 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
This article describes how to maintain the scroll position and freeze header at the time of postback inside an UpdatePanel.

LastTry.gif

Introduction

For most kind of web development, we mostly need to show data inside a GridView. Suppose we need to show 500 records inside a GridView and when the user selects a record, the details are displayed in the bottom or any where else in the page. Now for preventing postback for such operations, generally we use the AJAX UpdatePanel and put the GridView inside the UpdatePanel. This will resolve the problem of postback, but then what happens? When you want to check record 100, you just scroll down the records and select the record for checking the details, and now you get the records inside your details area, but look at the GridView scroll position. Ohhhh...no, it should not be happening: it is back at the top of the records. We have to now solve this problem at the time of partial postback of the page.

Problem Statement

Here I am going to describe the actual problem in detail:

Problem State Description

ajax.h1.jpg

I have a GridView with a scroll bar where I have 8 records. I can see 5 records at a time. For getting the other records, I have to scroll down. I just select the first records and get the details in the details area.

ajax.h2.jpg

No I want to see some other records. Let's say the 8th record. I just scroll down the scroll bar but I don't select a record. Now check the scroll bar position and the student detail.

ajax.h3.jpg

Now I select the 8th record. You will see in the details section that the detail of that records is showing, but check the scroll bar position.

This is quite a frustrating scenario for the user. We have a good solution for that by handling the partial post back of the page.

The Solution

When we are using an UpdatePanel, we need more control on the UpdatePanel to solve this problem. For that, we need to use the Sys.WebForms.PageRequestManager class. This is used to manage the partial-page update by using client-side script. We do not need to create an object of the PageRequestManager class directly. For this solution, I have used two events. beginRequest is raised before processing of the asynchronous postback starts. Here I have just retrieved the Div position of the scroll and stored it in a variable. endRequest is raised after an asynchronous postback is finished and control has been returned to the browser. Here I have just assigned the retrieved scroll position to the div again. For more info, click here.

Using the Code

I have written the following JavaScript code for handling the partial postback, which handles the Div scroll position during the postback of the GridView inside the UpdatePanel:

<script language="javascript" type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position
Function BeginRequestHandler(sender, args) 
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
} 
</script>

Following is the code for the GridView. The Gridview should be placed inside an UpdatePanel and a Div control. The Div allow us to scroll the GridView.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divGrid" style="overflow: auto; height: 130px"> 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Width="235px"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<HeaderStyle CssClass="HeaderFreez" />
<Columns>
<asp:BoundField DataField="Roll" HeaderText="Roll" SortExpression="Roll" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Langauge" HeaderText="Language" SortExpression="Langauge" />
<asp:CommandField ShowSelectButton="True" />
</Columns>
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:DotNetRnDDBConnectionString %>"
SelectCommand="SELECT * FROM [StudDetails]"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>

Here is the CSS code which is used to freeze the Header of the GridView. Just add this class as a HeaderStyle class of the Gridview. This will freeze the grid's header. We can use it in other cases where we need to freeze the header.

.HeaderFreez
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}

Reference

History

  • Written on 17-Oct-2008.

License

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

Share

About the Author

Abhijit Jana
Technical Lead
India India
.NET Consultant | Former Microsoft MVP - ASP.NET | CodeProject MVP, Mentor, Insiders| Technology Evangelist | Author | Speaker | Geek | Blogger | Husband

Blog : http://abhijitjana.net
Web Site : http://dailydotnettips.com
Twitter : @AbhijitJana
My Kinect Book : Kinect for Windows SDK Programming Guide
Follow on   Twitter

Comments and Discussions

 
QuestionScrollbar Position Pin
Member 11555178 at 25-Mar-15 7:46
memberMember 1155517825-Mar-15 7:46 
GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery Pin
Binu1985 at 21-Jun-14 0:56
memberBinu198521-Jun-14 0:56 
QuestionGridView Control Pin
ibrahim_5403 at 26-Feb-13 20:41
memberibrahim_540326-Feb-13 20:41 
QuestionAbt Code Pin
AmitDhakre at 13-Jul-12 2:36
memberAmitDhakre13-Jul-12 2:36 
QuestionI am not using select button? Pin
shuvra at 24-Apr-12 6:19
membershuvra24-Apr-12 6:19 
AnswerRe: I am not using select button? Pin
shuvra at 24-Apr-12 6:30
membershuvra24-Apr-12 6:30 
QuestionFix header doesnt work for me BUT YOUR POST IS MY MISSING LINK. Thanks so much! Pin
donPEPOT at 4-Aug-11 0:35
memberdonPEPOT4-Aug-11 0:35 
General5 is my Vote Pin
Hernan K. Cabrera at 29-Jul-11 23:53
memberHernan K. Cabrera29-Jul-11 23:53 
GeneralMy vote of 5 Pin
Rashmi_Karnam at 17-May-11 1:42
memberRashmi_Karnam17-May-11 1:42 
GeneralMy vote of 5 Pin
SChristmas at 15-Feb-11 1:59
memberSChristmas15-Feb-11 1:59 
GeneralHeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
Anurag Gandhi at 3-Dec-09 4:46
memberAnurag Gandhi3-Dec-09 4:46 
GeneralRe: HeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
Abhijit Jana at 3-Dec-09 22:40
mvpAbhijit Jana3-Dec-09 22:40 
GeneralRe: HeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
joshshrf at 4-Dec-09 7:29
memberjoshshrf4-Dec-09 7:29 
GeneralRe: HeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
Abhi-now at 10-Mar-10 3:36
memberAbhi-now10-Mar-10 3:36 
GeneralRe: HeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
Abhijit Jana at 13-Jun-10 22:10
mvpAbhijit Jana13-Jun-10 22:10 
GeneralRe: HeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
kumargtl at 28-Apr-11 3:41
memberkumargtl28-Apr-11 3:41 
GeneralRe: HeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
donPEPOT at 4-Aug-11 0:18
memberdonPEPOT4-Aug-11 0:18 
GeneralRe: HeaderFreeze is NOT working in IE8, Mozilla and Chrome Pin
Vince3rd at 24-Oct-11 23:52
memberVince3rd24-Oct-11 23:52 
GeneralLost the Header Pin
lqluo at 19-Nov-09 23:44
memberlqluo19-Nov-09 23:44 
GeneralRe: Lost the Header Pin
Abhijit Jana at 19-Nov-09 23:48
mvpAbhijit Jana19-Nov-09 23:48 
GeneralRe: Lost the Header Pin
lqluo at 19-Nov-09 23:53
memberlqluo19-Nov-09 23:53 
GeneralRe: Lost the Header Pin
Abhijit Jana at 20-Nov-09 0:01
mvpAbhijit Jana20-Nov-09 0:01 
GeneralRe: Lost the Header [modified] Pin
lqluo at 22-Nov-09 21:49
memberlqluo22-Nov-09 21:49 
GeneralVery useful code Pin
SivaPrakasamDotNet at 28-Oct-09 23:57
memberSivaPrakasamDotNet28-Oct-09 23:57 
GeneralRe: Very useful code Pin
Abhijit Jana at 7-Nov-09 2:37
mvpAbhijit Jana7-Nov-09 2:37 
GeneralThanks Pin
milindchavan12 at 16-Oct-09 2:44
membermilindchavan1216-Oct-09 2:44 
GeneralRe: Thanks Pin
Abhijit Jana at 16-Oct-09 3:09
mvpAbhijit Jana16-Oct-09 3:09 
GeneralGreat info Pin
Abhishek Sur at 13-Sep-09 10:04
memberAbhishek Sur13-Sep-09 10:04 
GeneralRe: Great info Pin
Abhijit Jana at 16-Oct-09 3:12
mvpAbhijit Jana16-Oct-09 3:12 
GeneralThanks for share this solution. Pin
korbe at 9-Sep-09 4:56
memberkorbe9-Sep-09 4:56 
GeneralRe: Thanks for share this solution. Pin
Abhijit Jana at 9-Sep-09 4:58
mvpAbhijit Jana9-Sep-09 4:58 
GeneralGreat, but... Pin
perle1 at 2-Aug-09 6:51
memberperle12-Aug-09 6:51 
GeneralNot work in Firefox Pin
chiragvm at 27-Jul-09 20:46
memberchiragvm27-Jul-09 20:46 
GeneralThanks Alottttt............ Pin
ravirajk21 at 12-Jun-09 6:46
memberravirajk2112-Jun-09 6:46 
GeneralRe: Thanks Alottttt............ Pin
Abhijit Jana at 14-Jun-09 9:14
mvpAbhijit Jana14-Jun-09 9:14 
GeneralBrilliant ! Pin
marc charmois at 17-Apr-09 13:23
membermarc charmois17-Apr-09 13:23 
GeneralRe: Brilliant ! Pin
Abhijit Jana at 19-Apr-09 2:53
mvpAbhijit Jana19-Apr-09 2:53 
GeneralRe: Brilliant ! [modified] Pin
marc charmois at 19-Apr-09 4:43
membermarc charmois19-Apr-09 4:43 
GeneralThanks for such a nice article Pin
Somali at 3-Mar-09 23:47
memberSomali3-Mar-09 23:47 
GeneralRe: Thanks for such a nice article Pin
Abhijit Jana at 4-Mar-09 0:19
mvpAbhijit Jana4-Mar-09 0:19 
GeneralBrilliant Pin
JSMui at 3-Mar-09 13:43
memberJSMui3-Mar-09 13:43 
GeneralRe: Brilliant Pin
Abhijit Jana at 3-Mar-09 19:30
mvpAbhijit Jana3-Mar-09 19:30 
GeneralGreat Job Pin
Brij at 19-Oct-08 3:15
memberBrij19-Oct-08 3:15 
GeneralRe: Great Job Pin
Abhijit Jana at 19-Oct-08 3:42
memberAbhijit Jana19-Oct-08 3:42 
GeneralRe: Great Job Pin
james_carter at 20-Oct-08 23:29
memberjames_carter20-Oct-08 23:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150427.1 | Last Updated 18 Oct 2008
Article Copyright 2008 by Abhijit Jana
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid