[RESOLVED]System.Web.UI.WebControls.TreeView: Set custom font for each node

I have a older app that uses an custom ascx control that wraps the Web tree control [Microsoft.Web.UI.WebControls.TreeView]. It used to use the older 1.0 version that allowed a custom node type to control what each node on a branch looked like. Some were
underlined, some were bold (see Below).

Now with the new tree control from System.Web.UI.WebControls.TreeView does not seem to allow the same level of control. Does anyone know how to set the font for an individual node? I see how to set it for parents leafs, but not each node individualy

You may want to consider using the Developer Tools (F12) within a modern browser and inspecting that particular element (Right-click > Inspect Element) which will allow you to access the source and see what CSS styles or classes are being applied
to a particular element. 

You could then write a custom CSS style that would override that previous style and apply the font of your choice to a particular node : 

<style type='text/css'>
    .yourNodeClass { font-family: Segoe UI; color: red; }
</style>

Any other code or markup that you have may be helpful as well.

Rion

Will this work with the newer System.Web.UI.WebControls.TreeView? I didn’t see a way to define a custom NodeType like you could in the older one.

 

Dim nodeCls1 as new TreeNode

Dim nodeCls2 as new TreeNode

If Condition1=true then  

NodeCollection.add(nodeCls1)

Else    

NodeCollection.add(nodeCls2)

End if

should work if I define a style fore each node class?

Hi Irjanzen,

If you want to add class to the TreeNode, I suggest you using the TreeViewNodeDataBound event in TreeView control, like this:

aspx code:

<asp:TreeView ID="TreeView1" 
     ShowExpandCollapse="true" 
     ExpandDepth="0" 
     runat="server" 
     DataSourceID="SiteMapDataSource1" 
     Height="755px" 
     ImageSet="Arrows" 
     OnTreeNodeDataBound="TreeView_TreeNodeDataBound"
....
</asp:TreeView>

cs code:

protected void TreeView_TreeNodeDataBound(object sender, TreeNodeEventArgs e)
        {
            e.Node.Text = "<div class='treeNodClass'>" + e.Node.Text + "</div>";
        }

Hope it helps.

Best Regards,
Terry Guo

Leave a Reply