Fixed Header Extender for GridView in ASP.Net

11/5/2008

It always seems like there is an endless supply of reports/tables that need to be created. And one of the requests that comes up with them is to make the headers freeze so you can scroll the rest of the information. It's fairly easy to do, just add a div around the table with a set height and overflow set to auto, set the header of the table to relative positioning, and you're done. However, if you've tried this with a Gridview, you'll notice that it gets a bit annoying. It's doable, but it's a bit annoying. So to help out, I created an extender that sets everything up for me:

FixedHeaderExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.FixedHeader.FixedHeaderBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.FixedHeader
  11: {
  12:     [Designer(typeof(FixedHeaderDesigner))]
  13:     [ClientScriptResource("AJAXControls.FixedHeader.FixedHeaderBehavior", "AJAXControls.FixedHeader.FixedHeaderBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class FixedHeaderExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:         [ExtenderControlProperty]
  20:         [DefaultValue(100)]
  21:         [RequiredProperty()]
  22:         public int Height
  23:         {
  24:             get
  25:             {
  26:                 return GetPropertyValue("Height", 100);
  27:             }
  28:             set
  29:             {
  30:                 SetPropertyValue("Height", value);
  31:             }
  32:         }
  33:     }
  34: }

FixedHeaderBehavior.js

   1: // README
   2: //
   3: // There are two steps to adding a property:
   4: //
   5: // 1. Create a member variable to store your property
   6: // 2. Add the get_ and set_ accessors for your property
   7: //
   8: // Remember that both are case sensitive!
   9:  
  10:  
  11: /// <reference name="MicrosoftAjaxTimer.debug.js" />
  12: /// <reference name="MicrosoftAjaxWebForms.debug.js" />
  13: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
  14:  
  15:  
  16: Type.registerNamespace('AJAXControls.FixedHeader');
  17:  
  18: AJAXControls.FixedHeader.FixedHeaderBehavior = function(element) {
  19:     AJAXControls.FixedHeader.FixedHeaderBehavior.initializeBase(this, [element]);
  20:     this._HeightValue = 100;
  21: }
  22: AJAXControls.FixedHeader.FixedHeaderBehavior.prototype = {
  23:     initialize: function() {
  24:         AJAXControls.FixedHeader.FixedHeaderBehavior.callBaseMethod(this, 'initialize');
  25:  
  26:         // TODO: Add your initalization code here
  27:         var Grid = this.get_element();
  28:         var Headers = Grid.getElementsByTagName("TBODY")[0].getElementsByTagName("TR")[0].getElementsByTagName("TH");
  29:         var Parent = Grid.parentNode;
  30:         Parent.style.height = this._HeightValue + "px";
  31:         Parent.style.overflow = "auto";
  32:         for (var x = 0; x < Headers.length; ++x) {
  33:             Headers[x].style.position = "relative";
  34:         }
  35:     },
  36:  
  37:     dispose: function() {
  38:         // TODO: Add your cleanup code here
  39:  
  40:         AJAXControls.FixedHeader.FixedHeaderBehavior.callBaseMethod(this, 'dispose');
  41:     },
  42:  
  43:     get_Height: function() {
  44:         return this._HeightValue;
  45:     },
  46:  
  47:     set_Height: function(value) {
  48:         this._HeightValue = value;
  49:     }
  50: }
  51: AJAXControls.FixedHeader.FixedHeaderBehavior.registerClass('AJAXControls.FixedHeader.FixedHeaderBehavior', AjaxControlToolkit.BehaviorBase);

It's pretty basic and very similar to the other extenders (uses the AJAX Toolkit, etc.). All you need to do is set the target control to the GridView and set the height that you want the grid to be. You can still format everything the way that you have in the past, etc. and it doesn't change anything along those lines. All that it does is freezes the headers and allows the other items to scroll. So definitely give it a try, leave feedback, and happy coding.



Comments