Custom Server Controls

Re: How to customize the styles on individual TreeNodes ?

srillaert — Wed, 04 Jan 2006 21:49:39 GMT

Thanks Kris !

seems that Fredrik Normén was really quick to post about this extensibility of TreeNodes.

greetz, Stefaan

Re: How to customize the styles on individual TreeNodes ?

XIII — Wed, 04 Jan 2006 18:21:55 GMT

Hi Stefaan,

I also found this blog that could be interesting for you: http://fredrik.nsquared2.com/viewpost.aspx?PostID=299

Grz, Kris.

Re: How to customize the styles on individual TreeNodes ?

srillaert — Thu, 29 Dec 2005 10:43:14 GMT

Hello Danny,

Thanks for taking your time to look at this. Your reply convinced me that this way of doing it should work and that it was something I was doing wrong. Your example was working so why wasn't mine ? And what a stupid mistake it was ! During my tests I was using :

writer.AddStyleAttribute(HtmlTextWriterStyle.Color, "Grey")

"Grey" is not an official CCS color (and English is not my native language ). This should have been :

writer.AddStyleAttribute(HtmlTextWriterStyle.Color, "Gray")

Normally I should have discovered this mistake early but the problem was that Firefox recognizes "Grey". And so the rendered html :

<a class="TreeView2_0 TreeView2_1" href="javascript:__doPostBack('TreeView2','sroot')" onclick="TreeView_SelectNode(TreeView2_Data, this,'TreeView2t0');" id="TreeView2t0" style="background-color:green;color:Grey;">root</a>

changed the color of the TreeNode text in Firefox but not in IE which lead me to the wrong conclusion that in IE class="TreeView2_0 TreeView2_1" takes precedence over style="background-color:green;color:Grey;" and in Firefox it is the other way around. Totally wrong.

So thanks a lot, I will continue working in this direction (with the suggestions you made). Have a great New Year and all the best wishes for 2006 !

Re: How to customize the styles on individual TreeNodes ?

dannychen — Wed, 28 Dec 2005 23:38:40 GMT

I'm not sure I follow you here. Your code should work. It's quite a good solution actually. Here's the code I used to test this:

Namespace My
    Public Class MyTreeNode
        Inherits TreeNode

        Protected Overrides Sub RenderPreText(ByVal writer As System.Web.UI.HtmlTextWriter)
            writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "green")
            writer.AddStyleAttribute(HtmlTextWriterStyle.Color, "Red")
            MyBase.RenderPreText(writer)
        End Sub
    End Class
End Namespace

And the page:

<asp:TreeView ID="TreeView1" runat="server">
    <Nodes>
        <My:MyTreeNode Text="root" Value="root" mystyle="color: red;">
            <My:MyTreeNode Text="child" Value="child" mystyle="color: green;" />
        </My:MyTreeNode>
    </Nodes>
    <NodeStyle BackColor="Black" BorderColor="Purple" BorderWidth="1px" BorderStyle="Solid" ForeColor="Yellow" />
</asp:TreeView>

The nodes come out with a purple 1px border, green background and red text. There is a overriding/merging of behavior between the NodeStyle and the inline styles applied through code. The inline styles will take precedence.

You should easily be able to create a few style properties on your custom tree nodes and data bind to them.

Danny

How to customize the styles on individual TreeNodes ?

srillaert — Tue, 27 Dec 2005 16:12:51 GMT

Is there a way that we can customize the styles on individual tree nodes in the TreeView ? I ask this question because the TreeView doesn't support node templates (like the Menu control, example how to use this for node styles on the blog of Danny Chen). Therefore I was looking for a solution that tries to add this to the TreeView by inheritance.

Since beta 2 the TreeView has become more extensible by adding the overridable function CreateNode() which should return a TreeNode. This way one can inherit from TreeView and change its behavior so that it uses a subclass of TreeNode instead of just instantiating default TreeNode(s).

However, when creating this subclass of TreeNode the only points where someone can change its appearance seems to be by overriding the RenderPreText and RenderPostText methods. This is great for adding stuff before or after the text of the tree node like checkboxes, images, etc. but it doesn't seem to help very much when one wants to change the style of the text of the tree node itself.

---
Even when one does something like (some optional technical stuff, not needed for the general question, can be skipped) :

        Protected Overrides Sub RenderPreText(ByVal writer As System.Web.UI.HtmlTextWriter)
            MyBase.RenderPreText(writer)

            writer.AddStyleAttribute(HtmlTextWriterStyle.Color, "Grey")
        End Sub

This results into an attribute 'style' with value "color:Grey;" being added to the hyperlink tag surrounding the text. But in IE this css-style is overridden by the css-styles defined in the 'class' attribute on the same (hyperlink) tag (in my test case class="TreeView1_0 TreeView1_1"). The css-styles in the 'class' attribute are defined by the server styles on the TreeView itself (NodeStyle, SelectedNodeStyle, …). So it are still these TreeView styles that decide the style of the node and not the css-styles added during RenderPreText.
---

Any ideas about how to inherit from the TreeView and getting styles on individual nodes working ?