Updated Code: Freeze the Header, Scroll the Grid

Published 12 December 03 12:47 PM | despos

If you downloaded the source code for this aspnetPRO Magazine article, you probably missed the source code of the custom control the article is all about. In this case, retry today and get the correct ZIP.

The article discusses how to build an automatic, self-contained mechanism to make a grid of data scroll within a browser. Basically, I'll accomplish it by extending the DataGrid control to support scrollable areas while preserving the same capabilities and programming facilities for the base class.

To make the content of a Web control scroll, you simply have to wrap it in a

tag, assign an explicit height to the block, and set the overflow CSS attribute to auto. For a DataGrid, in particular, this poses the problem of the header and the footer. (The pager is reasonably set aside because you don't want a pager if you scroll the grid.) Unless ad hoc measures are taken, the header and the footer will scroll with the rest of the grid. To make it short, to obtain what's in the figure below you need some extra work. (Which can be tricky and challenging.)

Note that in order to read the article you need a subscription to the aspnetPRO Magazine and must enter your subscriber ID.

 

Comments

# Shannon J Hager said on December 12, 2003 07:31 AM:

Is this the same IE-only method they printed last Winter/Spring?

# Paschal said on December 12, 2003 07:32 AM:

Glad to see you talk about this. It was a kind of 'strong' arguments to say the least few weeks ago in this weblogs.
I use myself an htc file that I found through MSN. Suit well my needs because it's for an admin tool, so IE obviously.
I heard this scrolling story will be fix in .Net 2.0. Can you confirm ?

# Paschal said on December 12, 2003 07:33 AM:

By the way Dino this article is not supposed to be the first part. What's about the second part, where you have the headers fixed whatever the width size of the columns ?

# Andrew Stopford said on December 12, 2003 11:43 AM:

I guess you have to be a subscriber to get the source? Anyway the source can be made available with this requirement?

# DinoE said on December 12, 2003 01:42 PM:

> Is this the same IE-only method they printed last Winter/Spring?

The method has a dependency on the overflow attribute. IE supports it since version 4.0 I believe. I'm pretty sure that latest Netscape browsers will accept it as well.

If you refer to the article(s), I was talking about part 2 which differs from part 1 mostly because I have packed everything into a custom DataGrid control. Part 1 used an ASCX with an embedded grid. This had the drawback that you must modify the source to bind to different columns.

# DinoE said on December 12, 2003 01:45 PM:

> I heard this scrolling story will be fix in .Net 2.0. Can you confirm ?

What I know about version 2.0 and scrolling is that the Panel control (i.e., the <div> tag) will have a scrollable attribute. The implementation is obvious--they just turn the CSS overflow attribute on.

If you're referring to something specific of the DataGrid, well I just don't know.

If you do that using an HTC, then you can more easily exploit the clientWidth property (think that is the name) which is the only method I know to get the REAL width of a table column in the browser. I realized about that after writing the article.

# DinoE said on December 12, 2003 01:49 PM:

>I guess you have to be a subscriber to get the source? Anyway the >source can be made available with this requirement?

I believe so.
However, I'll have the source code free on the www.CodeArchitects.com web site starting the 1st of January. In general, one month (approx) after the publication of the magazine.

You need to get a free registration. For details, see
http://weblogs.asp.net/despos/posts/42776.aspx

# Rob Eberhardt said on December 14, 2003 01:39 PM:

The sad thing is other browsers have supported overflow on the TBODY for several years (per the HTML 4 spec) & IE still doesn't. That technique should easily combine with minimal (IE-only) CSS like this:
http://slingfive.com/demos/scrollTable/

I think both could be applied to the Datagrid after reaching the browser, via some smart use of CSS selectors.

# Rolando said on January 13, 2004 06:58 PM:

I just checked www.CodeArchitects.com and the code is not yet available... Have you change your mind about making it available ???

# CJ said on January 30, 2004 01:48 PM:

Hey Dino, I thought you might have run into this one...

<%@ Page SmartNavigation="true" %> allows you to re-display the grid without its being redisplayed at the 1st row. It seems to work fine, but if you use an editable grid, it does not generate the textboxes after the Edit event has finished, unless the grid is repopulated (in which case it redisplays at the 1st row). But it does redisplay further down in the grid close to where the textboxes are after the Update Event has finished (with no grid repopulation e.g. an error was entered in a textbox).

Any idea why the textboxes are no-show after the Edit Event is done if the grid is not repopulated?

btw nice article, it was a big help for me in creating a variable-length editable grid. Thanks.

# tarang said on April 27, 2004 11:28 AM:

thanks

# tarang said on April 27, 2004 11:29 AM:

dfdfdfddfdfd

# jagadish said on July 29, 2004 11:00 PM:

i need code for freezing data grid header

# ANG said on August 5, 2004 08:42 PM:

If i have a horizontal scrollbar, this way can work?I want the header to make constant also

# arun said on August 28, 2007 06:01 AM:

uvvvveeeeeeeeeeee!!!!!!!!!!!

# rakesh said on October 9, 2007 03:34 AM:

U just provide the common thing which is known to every one.Nothing new .???????

Leave a Comment

(required) 
(required) 
(optional)
(required)