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 1334 Views

TreeView

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

Tim asked on 23 Nov 2011, 02:54 PM

Node-1-1.JPG

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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

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

Accepted

answered on 01 Dec 2011, 09:29 AM

nodecolor.zip

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