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:
Grid
must have a Fixed header.
- It should be scrollable horizontally.
- 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%" >
-->
</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%" >
-->
</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:
- We can define the height and the width of the
Div
we are using.
- The scrollbars that we may need or not using the
Overflow
property.
- 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:
- 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.
- Place the
Grid
relatively inside the Div
tag. If this property is not set, the Header will go out of the Div
Box.
- 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
.