Click here to Skip to main content
Click here to Skip to main content

Gridview Fixed Headers

, 7 May 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Excel like Fixed headers for Gridview - Works for many columns which current solutions don't

Introduction

Gridview is one of the good controls which enables us to produce Excel like output in the webforms. We had a scenario where we were supposed to give freeze pane like feature for Gridview. We had a lengthy Grid with some 20 or 30 columns. We had paging for about 20 records per page. So following were the requirements:

  1. Grid must have a Fixed header. 
  2. It should be scrollable horizontally. 
  3. It should be scrollable vertically.

Background

You can learn more about gridview in the following links:

Using the Code

I did a lot of searching and could only get solutions that worked where the columns are limited. So I did a small R&D and derived at a solution which I will be sharing now. Take for example a Timesheet application and it has a Grid. We are going to give a fixed header feature for this Grid. The GridView will look as follows:

<asp:GridView ID="grdTask" runat="server" GridLines  ="Both"    Width ="100%"  > 
            <!-- Some column Definitions--> 
</asp:GridView> 

The first thing we will be doing is to move this Grid inside a Div tag.

<div  id = "AdjResultsDiv"> 
<asp:GridView ID="grdTask" runat="server" GridLines  ="Both"    Width ="100%"  > 
            <!-- Some column Definitions--> 
</asp:GridView>
</Div>

Let's say we have a StyleSheet file "Style.Css". Please add the following styles for the Div using ID based styles. You can also use Class based styles.

div#MyGrid { 
width: 1080px; 
height: 500px; 
overflow: scroll; 
position: relative; 
}

The above code will make sure of the following things:

  1. We can define the height and the width of the Div we are using. 
  2. The scrollbars that we may need or not using the Overflow property. 
  3. Setting the Position to relative makes the Div relative to its parent.

The next thing will be the styles for the Grid. By default the grid will be rendered as a table with default Div tags as:

<div> 
<table ......   

So when you add a Div Tag before the Grid, it will be rendered as:

<div id = "AdjResultsDiv">

<div> 
<table ...... 

So our styles should be accordingly designed. I have given the Grid styles below:

div#MyGrid th 
{   
top: expression(document.getElementById("AdjResultsDiv").scrollTop-2); 
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
position: relative; 
z-index: 20; 
} 

Following are the functionalities:

  1. Give the Top and Left coordinates of the TH tag which will be generated for the Header inside the Grid. We are using the expression tag to dynamically assign the values through JavaScript.
  2. Place the Grid relatively inside the Div tag. If this property is not set, the Header will go out of the Div Box.
  3. Set the Z-Index of the Grid. The z-index property sets the stack order of an element. So based on the order, they will be placed in front.

So add the following in the Stylesheet:

div#AdjResultsDiv { 
width: 1080px; 
height: 500px; 
overflow: scroll; 
position: relative; 
}

div#AdjResultsDiv th {   
top: expression(document.getElementById("AdjResultsDiv").scrollTop-2); 
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
position: relative; 
z-index: 20; 
} 

And put the Grid inside the Div tag. That's all. You are now ready with the Fixed headers for the Grid.

Points of Interest

I noticed a very interesting thing when making this feature. Initially I got a large set of styles and tried to use them. But the Gridview did not show the fixed headers. So I did a small analysis about the position Relative concept and used it for the Div tag and the Grid's Table intelligently.

History

  • 7th May, 2009: Initial post

I will keep this post updated for the Fixed columns for the GridView.

License

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

Share

About the Author

Thanigainathan.S
Software Developer (Senior) Cognizant technology Solutions
India India
I love open source development. I used to go through technical updates from dotnet, try new softwares from community and evaluate them. I like to develop new programs that helps in my daily routine works and would blog them for my future reference. I used to reply fro questions in forums like codeprject,satckoverflow and asp.net.
 
I have my personal blog at http://www.codetherasa.in/

Comments and Discussions

 
QuestionGood Job Pinmemberaspnetgemini19-Jun-14 14:01 
QuestionShow Demo PinmemberMember 992560818-Aug-13 9:24 
Questionnot working in ie9 with master & content page PinmemberMember 1012477326-Jun-13 1:15 
BugDoes working in All IE browsers? Pinmemberpoomani4u27-Feb-13 2:56 
QuestionFacing Problem in Gridview Fixed Header [modified]? PinmemberGyana Ojha26-Apr-11 21:44 
GeneralMy vote of 4 Pinmemberavinpanwar308-Apr-11 0:07 
i think not only its simple but also work so no nice
GeneralMy vote of 5 Pinmemberplcasey7-Aug-10 22:43 
GeneralThe header not scrolling horizontally Pinmembervmanick26-May-10 5:38 
Generalfreezing column Pinmembercaptain121017-Feb-10 10:36 
Questiondoes it work on browsers other than IE? Pinmembermostafa_mostafa10-May-09 6:55 
AnswerRe: does it work on browsers other than IE? PinmemberThanigainathan.S10-May-09 9:12 
GeneralRe: does it work on browsers other than IE? Pinmemberpoomani4u27-Feb-13 1:52 
GeneralRe: does it work on browsers other than IE? PinmemberThanigainathan.S7-May-13 1:11 
GeneralGreat work! Pinmemberouyanglibing7-May-09 21:03 
GeneralRe: Great work! PinmemberThanigainathan.S7-May-09 22:16 
GeneralRe: Great work! Pinmemberjportelas12-May-09 13:20 

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
Web02 | 2.8.1411023.1 | Last Updated 7 May 2009
Article Copyright 2009 by Thanigainathan.S
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid