If you’ve ever had reason to try to extend the standard Microsoft web TreeView control, you will have no doubt noticed that MS was quite unkind to you and sealed (or declared NotInheritable for you VB.NET types) the System.Web.UI.WebControls.TreeNodeCollection class.

The problem arises when you want to overload the default behavior that is implemented by the TreeNodeCollection class. For example, when a node was added to my TreeView class (via the TreeView.Nodes.add method), I needed to be able to analyze it for the ultimate purpose of my subclass.

However, this was not possible because the TreeNodeCollection class is sealed, so I wasn’t able to inherit from it and overload the add method behavior as I should have been able to do.

There are always possibilities.

Anyone who knows me knows I don’t give up easily (if ever), and I eventually plowed through many false starts but hit upon a solution.

I decided to wrap the underlying TreeNodeCollection class with my own, and overload the Nodes property on the TreeView class, and the ChildNodes property on the TreeNode class.

The Wrapper.

Here’s what the wrapper looks like:
[vb language=".net"]

Public Class MyTreeNodeCollection

Private mtvwChildNodes As System.Web.UI.WebControls.TreeNodeCollection
Private mMyTreeViewOwner As IMyNodeContainer

Public Sub New(ByVal Owner As IMyNodeContainer, _
ByVal TreeViewChildren As System.Web.UI.WebControls.TreeNodeCollection)
mtvwChildNodes = TreeViewChildren
mMyTreeViewOwner = Owner
End Sub

Public Sub Add(ByVal child As MyTreeNode)
mtvwChildNodes.Add(CType(child, System.Web.UI.WebControls.TreeNode))
mMyTreeViewOwner.RegisterNodeForLookup(child)
End Sub
End Class
[/vb]

As you can see, the constructor takes the real, underlying TreeNodeCollection to pass all node to prior to being “registered” (analyzed). It also takes something that implements the IMyNodeContainer interface.

The IMyNodeContainer interface.

I had to implement this because I wanted to be able to use this wrapper class for both TreeView and TreeNode objects, but the signature of their properties is different - TreeView.Nodes and TreeNode.ChildNodes, respectively. So I opted for the interface to keep things clean.

Here’s what the interface looks like:

[vb language=".net"]
Public Interface IMyNodeContainer

Sub RegisterNodeForLookup(ByVal node As MyTreeNode)
ReadOnly Property Nodes() As MyTreeNodeCollection

End Interface
[/vb]

Wrapping things up.

This is where the magic happens.

To put the wrapper (MyTreeNodeCollection) in place, I overload the collection getting properties in the base class - TreeView.Nodes and TreeNode.ChildNodes, respectively, like so:

[vb language=".net"]
Public Overloads ReadOnly Property Nodes() As MyTreeNodeCollection Implements IMyNodeContainer.Nodes
Get
Return mNodeCollection
End Get
End Property
[/vb]

So, for those of you playing along at home, when the developer calls .Nodes on an instance of MyTreeView class, an instance of MyTreeNodeCollection is returned and the resulting add method in performed on the underlying TreeNodeCollection, thusly:

[vb language=".net"]
Public Sub Add(ByVal child As MyTreeNode)
mtvwChildNodes.Add(CType(child, System.Web.UI.WebControls.TreeNode))
mMyTreeViewOwner.RegisterNodeForLookup(child)
End Sub
[/vb]

You can see why I had to use the IMyNodeContainer interface here. The RegisterNodeForLookup performs the functionality I was originally trying to subclass the TreeNodeCollection for.

• Microsoft FxCop doesn't like Microsoft generated code! The other day I thought it might be nice to "do the right thing" and give my code a run against Microsoft's FxCop. I ran it right out of the...
• The 3 Most Important Questions You Should Ask About Each Bug You Find. I stumbled upon (quite literally) an article by Tom Van Vleck titled Three Questions About Each Bug You Find today, and thought I would share it: "The key idea behind...
• IE7 WebControl TreeView line gap in quirks mode. I've been writing a subclass of the MS Webcontrol.TreeView control for one of our Web Applications at work. I figured this would be a fairly easy task, since I only...
• Free Antivirus Recommendations (Protect Yourself Online With Free AntiVirus Software). I got tired of shelling out $40+ a year for antivirus protection long ago. Aside form the price, what really bugged me was the bloat! It became more and more...
• Dude, Where's my Folder treeview?! After a wee bit O' overzealous registry cleaning last week, I had a minor panic. Well, a picture being worth a 1000 words, here's what I saw when I opened...

I’ve been writing a subclass of the MS Webcontrol.TreeView control for one of our Web Applications at work. I figured this would be a fairly easy task, since I only needed to extended it with a few properties. It turns out that I was caught on a nit-picky annoyance in the TreeView control itself.

The TreeView control renders verticals lines with gaps.

Here’s a screen cap of the problem.

As you can see, the TreeView control renders the vertical line with a gap, or break (looks like a dashed line!). It didn’t matter how I loaded the data - dynamic/runtime/design time - I get the same gap no matter what!

I was able to see that it was not a problem in IE 6 or less, but what good is that? Well, it turns out that it was a bit of a clue because starting with version 5, IE didn’t render things correctly per the CSS boxing specification. This was fixed in IE 7, but to provide backwards compatibility, Microsoft carried this busted form of rendering forward in IE 6 as QuirksMode. The line gap problem only occurs in strict mode (default for IE 7 and 8, as well as firefox). I could make the line gap go away by forcing the browser into QuirksMode (by adding a comment, ex:

< ! - - QUIRK! - - >

to the very top of the HTML file), but I was writing a web control and would not always have the luxury of controlling my container.

I needed to find a long term solution to this problem.

Next, I looked at the HTML source of the rendered page, and saw this:

[html]
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td>
<div style="width:20px;height:1px">
<img src="/TreeviewControlTest/WebResource.axd?d=OYmDnVppVECKIpxOWC8o8Y7DO6QwB2J3EY4s4RR8zAU1&amp;t=633765128008804061" alt="">
</div>
</td>
<td>
<img src="/TreeviewControlTest/WebResource.axd?d=OYmDnVppVECKIpxOWC8o8UGy0bLoCc8gOB1oQm6Pzj81&amp;t=633765128008804061" alt="">
</td>
<td class="TreeView1_WebTree_1" style="white-space:nowrap;">
<a class="TreeView1_WebTree_0" href="javascript:__doPostBack(’TreeView1$WebTree’,'Root//Tree’)" onclick="TreeView_SelectNode(TreeView1_WebTree_Data, this,’TreeView1_WebTreet6′);" id="TreeView1_WebTreet6" name="TreeView1_WebTreet6">Tree</a>
</td>
</tr>
</table>
[/html]

Each node is rendered as a table, with the vertical line and expand/collapse icons being in their own table cell and wrapped in a div. The problem was the style applied to the outer div - style=”width:20px;height:1px“.

That 1px height was causing the vertical line image to be compressed, but where did it come from?

Reflecting on System.Web.UI.WebControls.TreeNode

I spent almost an hour delving into the various (and copious!) style properties for the tree and its nodes, looking for where this height setting was generating from. I couldn’t find it! I eventually opened the System.Web.UI.WebControls.dll in Reflector to see what the render code for the node was doing:

Well, once I saw that the code was hard-wired to render this CSS style, I was done. Or was I?

!important

Well, it wasn’t going to be as easy as setting the style in the code behind, but I could override the style in my own class.

The trick is to define, and apply the following CSS class:

[css]
<style type="text/css">
.MyTreeView TD Div
{
height: 20px!important;
}
</style>
[/css]

The !important CSS directive overrides the style applied in the System.Web.UI.WebControls.TreeNode render method.

Again, just as with the QuirksMode comment above, I was able to add the CSS style to the page and voila - problem solved. But this still wasn’t good enough. I needed this to work out of the box for any consumers of my control.

The ultimate answer was to override the RenderBeginTag of the TreeView control, and render this style before the control itself:

[vb language=".net"]

Public Overrides Sub RenderBeginTag(ByVal writer As System.Web.UI.HtmlTextWriter)
‘/////////////////////////////////////////////////////////////////////////////////////////
‘/// This is a total hack to get around some Microsoft BS which hardwires
‘/// a style attribute on the node div to set the height = 1px!
‘///
‘/// This renders a css override to force the div to the proper height
‘/////////
Me.CssClass = String.Concat(Me.CssClass, " MyTreeView")
writer.WriteBeginTag(HtmlTextWriterTag.Style.ToString)
writer.WriteAttribute(HtmlTextWriterAttribute.Type.ToString, "text/css")
writer.WriteLine(HtmlTextWriter.TagRightChar)
writer.Write(".MyTreeView TD Div ")
writer.WriteLine("{ height: 20px!important; }")
writer.WriteEndTag(HtmlTextWriterTag.Style.ToString)
writer.WriteLine()
‘//////////////////////////////////////////////////

‘/// Render the Standard Begin Tag
MyBase.RenderBeginTag(writer)
End Sub
[/vb]

• Free Antivirus Recommendations (Protect Yourself Online With Free AntiVirus Software). I got tired of shelling out $40+ a year for antivirus protection long ago. Aside form the price, what really bugged me was the bloat! It became more and more...
• Arraylist and generics don't mix with IEnumerable(Of T).GetEnumerator. The other day I was writing an in-house tool to assist in some upgrades we were performing on client installations. This tool was supposed to perform its operations on a...
• How to find what's running under SVCHost.exe My PC was behaving sluggishly the other day. I tried to be patient, but had to fire up the task manager when I could bear it no longer. That's when...
• Window.scrollTo Fails Under OVERFLOW-Y: auto Style. I was trying to subclass a Web Treeview control for my own evil purposes and ran into a sticky problem - scrollTo not working! Just for background, my evil purpose...
• The 3 Most Important Questions You Should Ask About Each Bug You Find. I stumbled upon (quite literally) an article by Tom Van Vleck titled Three Questions About Each Bug You Find today, and thought I would share it: "The key idea behind...

• Dedicated Server Hosting Advantages Dedicated Web Hosting Has Many Advantages By Volodymyr Zablotskyy Compared to shared web hosting, it is more expensive to host your web site on a dedicated server. You may wonder why you would even think about using a dedicated web hosting solution. Well, there are many advantages to having your......
• Web Marketing Business Solutions For Small Business | Online Marketing Consultant Web MarketingLooking for ways to give your business a marketing boost? If so, do you own an on-line presence as part of your promotions formula? The World Wide Web is now the first selection for individuals researching products and services they are thinking buying.The web has now assumed dominance the......
• Book Review: The Hal Leonard Acoustic Guitar Method The Hal Leonard Acoustic Guitar Method book includes real songs you can hear on the radio to teach a variety of acoustic guitar concepts. Included are songs by Eric Clapton, Robert Johnson, James Taylor, the Indigo Girls, and many others. There are lesson sections on topics such as finger picking,......
• Create your web page with NetBeans - Part 3 In this part we will look into PHP basics PHP is a widely used open source, general-purpose scripting language. It was originally designed for use in Web site development.  PHP proved so useful and popular, it rapidly grew to become the full-featured language that it is today, acquiring the name......
• Web Site Maintenance Design -- Design To Save Time! It is a smart thing to try to save as much time in construction, and later in maintenance time as you can, so you can free yourself more valuable time building great content.When building a web site, it is important to have a plan to give yourself good direction......