Home > .net 3.5, AJAX, c#, JavaScript, Visual Studio 2008 > Creating an Excel Scrolling GridView Custom Control

Creating an Excel Scrolling GridView Custom Control

September 21, 2007

I really liked Matt Berseth’s article earlier this week where he created a Frozen header GridView using CSS.  The only issue I saw was a reliance on creating the div around the control and keeping the CSS in tact.  Easy, but repetative if you planned to reuse the technique.

So, I set out to simply encapsulate it inside a custom GridView control.  The Code file and the library itself can be downloaded here.

A few things I addressed:

  • Leaving HeaderStyle-BackColor empty results in a white background being added to the grid—clear makes it look odd.
  • The Div Height and Width are properties of the control with preslugged defaults of 100% width and a 400px height.
  • The control is Skinnable

Frozen headers on a custom GridView Control

To complete the work, I overrode two methods, Render and CreateChildTable, and the Width property.  Both of the methods overrides provided the styling necessary, using Matt’s examples, to surround the GridView.  The width property is overridden to allow the scrollbar to be seen if the width of the GridView is set to 100%.

protected override void Render(HtmlTextWriter writer)


writer.AddAttribute(“class”, “container”);

       writer.AddStyleAttribute(HtmlTextWriterStyle.Height, DivHeight);

       writer.AddStyleAttribute(HtmlTextWriterStyle.Width, DivWidth);

       writer.AddStyleAttribute(HtmlTextWriterStyle.Overflow, “auto”);

       this.BorderWidth = Unit.Pixel(0);


       foreach (DataControlFieldHeaderCell th in this.HeaderRow.Cells)




             if (this.HeaderStyle.BackColor ==











protected override Table CreateChildTable()


Table table = base.CreateChildTable() as Table;

table.Style.Add(HtmlTextWriterStyle.OverflowX, “hidden”);

return table;


public override Unit Width




              return base.Width;




              base.Width =

(value == Unit.Percentage(100))

? Unit.Percentage(98)

: value;



The properties and such are simply string Properties.  To use the control, simply reference the assembly.

<%@ Register TagPrefix=”tsd” Assembly=”TSCustomControls” Namespace=”TSCustomControls” %>

<tsd:GridViewWithHeaders runat=”server” ID=”gv” SkinId=”HeaderGridView” />

You can also drag/drop the control onto the Toolbox.

Note, this is just a “late night dinking around”… care when using in Production. I still need to work out some odd glitches dealing with the Widths and such, but it’s a start. 

As it is:


DivWidth – Width in Unit of the Container.
Width – Width of the GridView inside the Container.

DivHeight – Width in Pixels (% gives a display error at the moment) of the Container.
Height – Height of the GridView inside the Container.

So, a Width=”100%” DivWidth=”75%” would create a grid that placed the scrollbar at 75% of the screen and filled the container to 100%.


  1. Seraa
    September 22, 2007 at 3:09 am

    Well, I’m rather tired since it’s 2:08 am and looking at coding makes my eyes cross… I will leave with a /wave. ^^~

  2. September 22, 2007 at 8:32 am

    HAHAH… /wave!

  3. John Adams
    February 11, 2008 at 2:18 pm

    Hi David,
    Could you reupload the GridViewWithHeaders_v1.zip file? The link is broken.

  4. February 12, 2008 at 6:00 pm

    Yeah, as soon as I find it, I’ll post it up and update this thread. My code samples for that are at home.

  5. Lee
    December 6, 2008 at 3:02 pm

    Does this work with horizontal scrolling? I will try this later looks good.

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: