Freeze header of scrollable datagrid

Code Snippet: Freezing Datagrid Header/Columns Made Easy First posted on 11/10/2004, Last Updated on 5/28/2005 by Richard Xin Demo: (Freeze first 2 columns & header) ProductID ProductName SupplierID CategoryID QuantityPerUnit UnitPrice UnitsInStock UnitsOnOrder ReorderLevel Discontinued 17 Alice Mutton 7 6 20 - 1 kg tins 39.0000 0 0 0 True 3 Aniseed Syrup 1 2 12 - 550 ml bottles 10.0000 13 70 25 False 18 Carnarvon Tigers 7 8 16 kg pkg. 62.5000 42 0 0 False 1 Chai1aaa 1 1 10 boxes x 20 bags 18.0000 39 0 10 False 2 Chang 1 1 24 - 12 oz bottles 19.0000 17 40 25 False 39 Chartreuse verte 18 1 750 cc per bottle 18.0000 69 0 5 False 4 Chef Anton's Cajun Seasoning 2 2 48 - 6 oz jars 22.0000 53 0 0 False 5 Chef Anton's Gumbo Mix 2 2 36 boxes 21.3500 0 0 0 True 38 C?te de Blaye 18 1 12 - 75 cl bottles 263.5000 17 0 15 False 33 Geitost 15 4 500 g 2.5000 112 0 20 False 15 Genen Shouyu 6 2 24 - 250 ml bottles 15.5000 39 0 5 False 31 Gorgonzola Telino 14 4 12 - 100 g pkgs 12.5000 0 70 20 False 6 Grandma's Boysenberry Spread 3 2 12 - 8 oz jars 25.0000 120 0 25 False 37 Gravad lax 17 8 12 - 500 g pkgs. 26.0000 11 50 25 False 24 Guaraná Fantástica 10 1 12 - 355 ml cans 4.5000 20 0 0 True 26 Gumb?r Gummib?rchen 11 3 100 - 250 g bags 31.2300 15 0 0 False 22 Gustaf's Kn?ckebr?d 9 5 24 - 500 g pkgs. 21.0000 104 0 25 False 10 Ikura 4 8 12 - 200 ml jars 31.0000 31 0 0 False 36 Inlagd Sill 17 8 24 - 250 g jars 19.0000 112 0 20 False 13 Konbu 6 8 2 kg box 6.0000 24 0 5 False 32 Mascarpone Fabioli 14 4 24 - 200 g pkgs. 32.0000 9 40 25 False 9 Mishi Kobe Niku 4 6 18 - 500 g pkgs. 97.0000 29 0 0 True 30 Nord-Ost Matjeshering 13 8 10 - 200 g glasses 25.8900 10 0 15 False 8 Northwoods Cranberry Sauce 3 2 12 - 12 oz jars 40.0000 6 0 0 False 25 NuNuCa Nu?-Nougat-Creme 11 3 20 - 450 g glasses 14.0000 76 0 30 False 16 Pavlova 7 3 32 - 500 g boxes 17.4500 29 0 10 False 11 Queso Cabrales 5 4 1 kg pkg. 21.0000 22 30 30 False 12 Queso Manchego La Pastora 5 4 10 - 500 g pkgs. 38.0000 86 0 0 False 28 R?ssle Sauerkraut 12 7 25 - 825 g cans 45.6000 26 0 0 True 34 Sasquatch Ale 16 1 24 - 12 oz bottles 14.0000 111 0 15 False 27 Schoggi Schokolade 11 3 100 - 100 g pieces 43.9000 49 0 30 False 20 Sir Rodney's Marmalade 8 3 30 gift boxes 81.0000 40 0 0 False 21 Sir Rodney's Scones 8 3 24 pkgs. x 4 pieces 10.0000 3 40 5 False 35 Steeleye Stout 16 1 24 - 12 oz bottles 18.0000 20 0 15 False 19 Teatime Chocolate Biscuits 8 3 10 boxes x 12 pieces 9.2000 25 0 5 False 29 Thüringer Rostbratwurst 12 6 50 bags x 30 sausgs. 123.7900 0 0 0 True 14 Tofu 6 7 40 - 100 g pkgs. 23.2500 35 0 0 False 23 Tunnbr?d 9 5 12 - 250 g pkgs. 9.0000 61 0 25 False 7 Uncle Bob's Organic Dried Pears 3 7 12 - 1 lb pkgs. 30.0000 15 0 10 False
You have already known how to make you long datagrid scrollable, however, when you scroll the grid, the header of the datagrid scrolls away. To make scrollable datagrid more user friendly, you may want to "freeze" the header while scrolling, and sometimes you may need to "freeze" your columns like Excel Spreedsheet. There are some third party components around to help you to implement these, and I believe those components used javascript heavily, it will take lots of time to develop such component if you decide to do it your own. My solution is pretty easy with only couple lines of code, the con is that it only works with IE 5 & up, becase I used CSS Expression which is used to assign a JavaScript expression to a CSS property, and it was first introduced in IE 5.
Freeze Header: 1. Define class .Freezing in Stylesheet:     .Freezing {    position:relative ;    top:expression(this.offsetParent.scrollTop);    z-index: 10; }     2. Assign Datagrid Header's cssClass to Freezing     <HeaderStyle ... CssClass= "Freezing" ...></ HeaderStyle>     3. You are done! Freeze Columns: 1. Define class .FreezingCol in Stylesheet:     .FreezingCol {    LEFT: expression(document.getElementById("freezingDiv").scrollLeft);    /*freezingDiv is the name of the div to make your datagrid scrollable */      POSITION: relative;    z-index: 1; }     2. Assign Columns' cssClass to FreezingCol If you have templateColumn, you can simply assign cssClass of the column to freezingCol. If you create the columns dynamically, you can assign the cssClass at runtime within ItemCreated event. For example:     e.Item.Cells(0).CssClass = "FreezingCol" e.Item.Cells(1).CssClass = "FreezingCol"     3. You are done! Please keep in mind this solution only works with IE5 & up. To make cross browser solution, you need to use javascript which is out of scope of this article. Happy Programming!