Creating an Excel Scrolling GridView Custom Control

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

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)

       {

              th.Style.Add(HtmlTextWriterStyle.Position,

“relative”);

             if (this.HeaderStyle.BackColor ==

System.Drawing.Color.Empty)

             {

             th.Style.Add(HtmlTextWriterStyle.BackgroundColor,

“White”);

}

}

 

       base.Render(writer);

}

 

protected override Table CreateChildTable()

{

Table table = base.CreateChildTable() as Table;

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

return table;

}

public override Unit Width

{

get

       {

              return base.Width;

}

       set

       {

              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:

Properties

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%.

 

Tags: gridview, asp.net+3.5, custom+control, c#, Excel