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]

• How To Control Disk Thrash From ccmexec.exe (SMS Agent). Today started like any other day at work. I sat down, logged into my PC and was greeted by the thrashing sound of my hard drive. I've come to realize...
• 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...
• Google Chrome: the OS. Google announced last Tuesday that it has its sights on dethroning Microsoft as desktop OS king: "The new operating system, announced late Tuesday night on Google's Web site, will be...
• Are Free Antivirus and Firewall Products Really Any Good? There was a time in my life when I used security and protection suites like Norton and McAfee, but after a while I grew unsatisfied with them. "But Norton and...
• 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...

• 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......
• Internet Marketing Needs a Makeover? Let me start by saying: and a Major One at that! Last time I checked:  we are in the 21st century, so how come Internet marketers are still stuck in the yesteryears? Allow me to count the ways:     HTML Your Basic HTML is still the foundation and serves......
• Importance of Java / J2EE Web Application Development Many businessmen, investors and organization are more interested in Web Application Development just because of raising importance of software and Internet in the world wide economics, so method is how to play a lively and important role to communicate with the whole World Wide Web.Web Applications Development is only the......
• Musical Instruments: Drums for Sale The unique thing about drums when it comes to making music is that there are so many different elements that change the sound you create when you play them. The size, shape and composition of the drum will all alter the sound that it creates. Whether you beat on 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,......