December 20 2009
Fixed GridView headers with jQuery
Introduction
One of requirement these days while displaying data with GridView, is to show fixed headers and also show scrollable contents (if data is more than the visible area of browser). It is not a easy task with just HTML, CSS and ASP.Net. We need something which is more easy and less hectic. And here comes our jQuery and its plugins.
Here I am going to show how to display large amount of data in GridView with fixed headers and scrollable contents.
Why we need such a GridView ?
1. No need to scroll the entire page, when table contents exceeds the visible area of browser.
2. When you scroll contents of table, header must always be visible. As it will be easy when you have so many columns with similar data.
Step 1. Setup your web site for using jQuery
You can check my previous article to see how you can set an ASP.Net web site for using jQuery.
Step 2 . Download the plugin and set it
I will use a jQuery plugin “Chromatable”. This is a very easy plugin and woks best for ASP.Net GridView. Download plugin from here
And then place the plugni file together with jQuery core file in Scripts folder
Step 3. Lets implement it
First set your page to use jQuery, plugin file and CSS –
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Fixed Header Table</title>
<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.chromatable.js"></script>
<link href="App_Themes/default/style.css" rel="stylesheet" type="text/css" />
</head>
Now we have all things set up. Now I am going to add a aspx page to my web site. I named page as “FixedHeaders.aspx”. Next I will add a SQLDataSource and a GridView to my page. These two controls will display all products from my “Product” table in Northwind database.
Code will be –
<asp:SqlDataSource ID="mySqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued], [CategoryName] FROM [Alphabetical list of products]">
</asp:SqlDataSource>
<asp:GridView ID="myGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="mySqlDataSource" OnDataBound="myGridView_DataBound">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
<asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
<asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
<asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
</Columns>
</asp:GridView>
For this plugin to work, I just need to do one more thing. I need to tell ASP.Net that render accessible header for my GridView. By this I mean, that there should be a
thead tag in my table ( to render header of table as thead tag). In normal case ASP.Net render gridview without a thead tag ( it just uses a tr tag with nested th for headers ).
So the code behind will look like this
protected void myGridView_DataBound(object sender, EventArgs e)
{
myGridView.UseAccessibleHeader = true;
if (myGridView.Rows.Count != 0)
{
myGridView.HeaderRow.TableSection = TableRowSection.TableHeader;
myGridView.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
So by these lines I am asking ASP.Net
1. Use accessible headers for my GridView ( i.e render seperate thead tags )
2. Render header of columns in header of table, footers of the columns in footer of table
Now I have all things in place. Last thing I need to do is to add code to freeze header of my GridView by adding following jQuery code to my head section of page.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#<%= myGridView.ClientID %>").chromatable({
width: "100%",
height: "800px",
scrolling: "yes"
});
});
</script>
The code is very easy. Just call chromatable() function on your GridView at the time of load of page. When I execute my page in browser, I got this output -
So finally GridView has Fixed headers together with content scrolling.
Happy Programming 
Attached Files:
- Sample
Sample code for this article
Very good tutorial.
Retweeted!