2009 December | Concept Zen

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

post1
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 -

post3