Freeze ASP.NET GridView Headers by Creating Client-Side Extenders

Home > Blogs > Developer Visual Studio / ASP.NET > Freeze ASP.NET GridView Headers by Creating Client-Side Extenders

Freeze ASP.NET GridView Headers by Creating Client-Side Extenders

Like This Blog 1 Dan Wahlin
Added by July 31, 2007

Lately I’ve been working on a pet project where I needed to freeze a GridView header so that it didn’t move while the grid records were scrolled by an end user.  After searching the Web I came across a lot of “pure” CSS ways to freeze a header.  After researching them more they tend to rely on a lot of CSS hacks to do the job and require HTML to be structured in a custom way.  I also found a lot of custom GridView classes   Some of the solutions were really good while others seemed a bit over the top and required a lot of custom C# or VB.NET code just to do something as simple as freezing a header.  Freezing a header requires CSS and potentially JavaScript depending upon what needs done.  Regardless if CSS or JavaScript are used, these are client-side technologies of course.  I started to write my own derivative of the GridView class but quickly realized that it made more sense to use the standard GridView control and simply extend it from the client-side.  An example of what I was after is shown next:

In the past I’ve always made a scrollable GridView by wrapping a <div> tag around the control, adding a table with header rows inside the <div> (but above the GridView control code), and setting the CSS overflow property on the wrapper div to “auto”.  Scott Mitchell has a nice article on doing this with a DataGrid and you can see a sample of doing something like that at my XML for ASP.NET Developers Website if you’re interested.  This technique works well but makes it a bit hard to line up the header and child rows perfectly (although it can be done).

I decided to build my own client-side GridView “extender” code to accomplish the task since I didn’t want to worry about yet another GridView assembly being in my toolbox just to freeze a header.  It appears to work great in IE6+ and Firefox 2 (haven’t tried FireFox 1 – 1.5) although I’m sure there are some ways it could be improved and I can’t say I’ve done extensive testing.  The code basically grabs the first header row from the GridView using JavaScript and moves it inside of a THEAD tag so that CSS can easily be applied to all of the TH tags and things work well in FireFox.  It then applies a few styles to the appropriate items within the GridView HTML that is generated.

The JavaScript and CSS code is shown below.  On online version can be viewed here.

<style type=”text/css”>
.WrapperDiv {
width:800px;height:400px;border: 1px solid black;
.WrapperDiv TH {
.WrapperDiv TR
/* Needed for IE */
function onLoad()


function FreezeGridViewHeader(gridID,wrapperDivCssClass)

/// <summary>
///   Used to create a fixed GridView header and allow scrolling
/// </summary>
/// <param name=”gridID” type=”String”>
///   Client-side ID of the GridView control
/// </param>
/// <param name=”wrapperDivCssClass” type=”String”>
///   CSS class to be applied to the GridView’s wrapper div element.
///   Class MUST specify the CSS height and width properties.
///   Example: width:800px;height:400px;border:1px solid black;
/// </param>

var grid = document.getElementById(gridID);
(grid !‘undefined’)
div = null;
(grid.parentNode !‘undefined’)

//Find wrapper div output by GridView
div grid.parentNode;
(div.tagName == “DIV”)
wrapperDivCssClass; “auto”;

//Find DOM TBODY element and remove first TR tag from
//it and add to a THEAD element instead so CSS styles
//can be applied properly in both IE and FireFox

var tags grid.getElementsByTagName(‘TBODY’);
(tags !‘undefined’)

var tbody tags[0];
trs tbody.getElementsByTagName(‘TR’);
headerHeight 8;
(trs !‘undefined’)
headerHeight +
headTR tbody.removeChild(trs[0]);
head = document.createElement(‘THEAD’);
grid.insertBefore(head, grid.firstChild);
//Needed for Firefox =
(div.offsetHeight –  headerHeight) + ‘px’; “hidden”;
tbody.overflow ‘auto’;
tbody.overflowX ‘hidden’;


This solution works well but it means I’d have to reference a CSS file and JavaScript file for each GridView control that needs a frozen header.  I decided to build an ASP.NET AJAX Extender control based upon the ASP.NET AJAX Toolkit which turned out to be fairly straightforward.  This means that I have to reference an assembly in my project (which I complained about above), but I can still use the stock GridView control.  I’ll talk more about the extender control  (called GridViewHeaderExtender) in a future post.  Those interested in seeing the code can download it here.  The extender seems to work great with IE6+ and FireFox 2 but doesn’t work with Safari on Windows (very few of the frozen header solutions I found online worked with Safari).

Videos You May Like

Agile Methodology in Project Management

0 185 0

In this video, you will gain an understanding of Agile and Scrum Master Certification terminologies and concepts to help you make better decisions in your Project Management capabilities. Whether you’re a developer looking to obtain an Agile or Scrum Master Certification, or you’re a Project Manager/Product Owner who is attempting to get your product or … Continue reading Agile Methodology in Project Management

An Overview of Office 365 – Administration Portal and Admin Center

0 960 3

This is part 1 of our 5-part Office 365 free training course. In this Office 365 training video, instructor Spike Xavier introduces some of the most popular services found in Microsoft Office 365 including the Admin Portal and Admin Center. For instructor-led Office 365 training classes, see our course schedule: Spike Xavier SharePoint Instructor – … Continue reading An Overview of Office 365 – Administration Portal and Admin Center

Creating Users and Managing Passwords in Microsoft Office 365

0 809 5

In this Office 365 training video, instructor Spike Xavier demonstrates how to create users and manage passwords in Office 365.   For instructor-led Office 365 training classes, see our course schedulle: Spike Xavier SharePoint Instructor – Interface Technical Training Phoenix, AZ 20347: Enabling and Managing Office 365    

Write a Comment

See what people are saying...

    Share your thoughts...

    Please fill out the comment form below to post a reply.