Gridview Fixed Headers

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:

• GridView Documentation 
• Fixed table headers problem ..

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

• 7^th May, 2009: Initial post

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