Gridview is one of the good controls which enables us to produce Excel like output in the webforms.You can learn more about grid view in the following link GridView Documentation
We had a scenario where we are 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.
I did a lot of search and could only get solutions that worked only 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 fixed header feature for this Grid. The GridView will look like as fallow's.
<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>
Lets 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 tabel with default Div tags as
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 Style sheet :-
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.
You can find the Demo here.
Thanks,
Thani