This is a migrated thread and some comments may be shown as answers.

How to change the background color of a node, when the colors are applied in CSS?

4 Answers 1129 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 23 Nov 2011, 02:54 PM

I'm setting the background colors of the nodes in my treeview by binding to a CSS field in my database.

In my actual application, the nodes on the tree represent tasks and the colors indicate the priority. The same webform includes some controls to update the task. At the end of this process, I need to update the selected node color. Can someone tell me the code that I need to do this?

Here's a simplified code sample. When I try setting the node colors in code, only the text portion of the node is set. In the screen shot shown that's attached to this thread, notice how only the Node 1-1 section is colored in red. The rest of the node remains green.

What code do I need to change the color of the entire node?

Many thanks,
Tim

<head runat="server">
    <title></title>
    <style type="text/css">
        .green
        {
            background-color: green;
        }
        .red
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                <telerik:RadTreeView ID="RadTreeView1" runat="server" DataFieldID="UniqueId" DataFieldParentID="parentid"
                    DataTextField="NodeText" DataValueField="UniqueId">
                    <ContextMenus>
                    </ContextMenus>
                    <DataBindings>
                        <telerik:RadTreeNodeBinding ContentCssClassField="CssClass" />
                    </DataBindings>
                </telerik:RadTreeView>
            </ContentTemplate>
        </asp:UpdatePanel>
 
        <asp:LinkButton Text="Change Color" runat="server"  ID="changeLink"/>
 
    </div>
 
    </form>
</body>
</html>


Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
 
    If Not Page.IsPostBack Then
 
        Dim values = {New With {.UniqueId = "0", .parentid = Nothing, .NodeText = "Node 1", .CssClass = "red"},
                      New With {.UniqueId = "1", .parentid = Nothing, .NodeText = "Node 1-1", .CssClass = "green"}
                     }
        RadTreeView1.DataSource = values
        RadTreeView1.DataBind()
    End If
 
End Sub
 
Protected Sub changeLink_Click(sender As Object, e As System.EventArgs) Handles changeLink.Click
 
    'None of these color the entire row. what's the correct syntax to use?
    RadTreeView1.FindNodeByValue("1").BackColor = Color.Red
    RadTreeView1.FindNodeByValue("1").CssClass = "red"
 
End Sub

4 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 28 Nov 2011, 09:52 AM
Hi Tim,

You can try to set the color of each node in the NodeDataBound event as in the following code:
Protected Sub RadTreeView1_NodeDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles RadTreeView1.NodeDataBound
       If e.Node.Text = "Node 1" Then
           e.Node.CssClass = "red"
       Else
           e.Node.CssClass = "green"
       End If
   End Sub

Hope this will be helpful.

Greetings,
Plamen Zdravkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Tim
Top achievements
Rank 1
answered on 28 Nov 2011, 03:59 PM
Hi Plamen,

Many thanks for your reply. Can you clarify how I would use the NodeDataBound that you mention?

I assume that NodeDataBound method gets called when the TreeView is initially databound. I need to change the color based on some user initiated action. So how would I modify the following code to make this work?


Protected Sub changeLink_Click(sender As Object, e As System.EventArgs) Handles changeLink.Click
 
    'None of these color the entire row. what's the correct syntax to use?
    RadTreeView1.FindNodeByValue("1").BackColor = Color.Red
    RadTreeView1.FindNodeByValue("1").CssClass = "red"
 
End Sub

Tim
0
Accepted
Plamen
Telerik team
answered on 01 Dec 2011, 09:29 AM
Hi Tim,

I am sending you the code of the web site that I used in order to achieve the desired functionality. If it is not exactly the same scenario as you expected please let me know what is the difference.

Hope this will be helpful.

Kind regards,
Plamen Zdravkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Tim
Top achievements
Rank 1
answered on 02 Dec 2011, 04:50 PM
Hi Plamen

Many thanks for the code sample - it solves the problem!

Just to summarise the solution for anyone else reading this thread, the answer is to remove the RadTreeNodeBinding element in the ASPX, in addition to adding Plamen's NodeDataBound Code.

<
telerik:RadTreeNodeBinding ContentCssClassField="CssClass" />


Tim
Tags
TreeView
Asked by
Tim
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Tim
Top achievements
Rank 1
Share this question
or