asp.net - Change TreeView root node style programmatically

Change TreeView root node style programmatically

The TreeView is an asp.net web server control. The TreeView is located under System.Web.UI.WebControls namespace. TreeView web server control displays hierarchical data. Such as a table of contents in a tree structure.

The following asp.net c# tutorial code demonstrates how we can programmatically change the TreeView web server control’s root node style. The asp.net c# developers can set the TreeView root node style using its RootNodeStyle property.

The TreeView RootNodeStyle property gets a reference to the TreeNodeStyle object that allows us to set the appearance of the root node in the TreeView control. The TreeView RootNodeStyle property value is TreeNodeStyle which is a reference to the TreeNodeStyle that represents the style of a node in the TreeView.

The TreeNodeStyle class represents the style of a node in the TreeView control. The TreeView RootNodeStyle property controls the default appearance of the root node in the TreeView control.

In this asp.net c# tutorial, we changed the TreeView root node’s various styles such as background color, text color, border color, border width, and font style bold and italic using its RootNodeStyle property.

TreeViewRootNodeStyle.aspx


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Drawing" %>

<!DOCTYPE html>

<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        TreeView1.RootNodeStyle.BackColor = Color.Crimson;
        TreeView1.RootNodeStyle.ForeColor = Color.Snow;
        TreeView1.RootNodeStyle.BorderWidth = 1;
        TreeView1.RootNodeStyle.BorderColor = Color.HotPink;
        TreeView1.RootNodeStyle.Font.Bold = true;
        TreeView1.RootNodeStyle.Font.Italic = true;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to set, change TreeView root node style programmatically</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Navy">TreeView Example: RootNodeStyle</h2>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        <asp:TreeView 
             ID="TreeView1"
             runat="server"
             DataSourceID="SiteMapDataSource1"
             Width="275"
             BorderWidth="2"
             BorderColor="Crimson"
             >
        </asp:TreeView>
        <br />
        <asp:Button 
             ID="Button1" 
             runat="server"
             ForeColor="Crimson"
             Text="Change RootNodeStyle"
             Height="45"
             OnClick="Button1_Click"
             Font-Bold="true"
             />
    </div>
    </form>
</body>
</html>

Web.sitemap


      Web.sitemap source code here.