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

How to change the Forecolor of the node with web services

9 Answers 118 Views

TreeView

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

9 Answers, 1 is accepted

answered on 15 Jul 2010, 02:42 PM

Hello Todd A,

Well, for now we don't serialize data such as fore and background color of the nodes.

So you can not get it directly from a property.

What you can do, though, is to set a custom attribute to the node, containing the value of the color. Then on the client you can plug in OnClientNodeDataBound event and get this same attribute's value. After this you have to apply it as a style of the dom element of the node (node.get_element().style...).

Here is a reference to the client object of the RadTreeNode: http://www.telerik.com/help/aspnet-ajax/tree_clientradtreenode.html
Here is a reference to the ClientNodeDataBound event: http://www.telerik.com/help/aspnet-ajax/treeview-client-side-events-onclientnodedatabound.html

We, definitely are going to think about including this as a property of the nodes that are being sent from the server for future development, but for now this should work for you just as fine.

Hope this is helpful for you!

Regards,
Nikolay Tsenkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 15 Jul 2010, 04:47 PM

<script type="text/javascript">

function NavOnClientNodeDataBoundHandler(sender, e)

{

var node = e.get_node();

node.set_toolTip(node.get_attributes().getAttribute("ToolTip"));

node.get_element().style.color = node.get_attributes().getAttribute("Color");

}

</script>

Hi Nikolay,

The above code sets the tooltip no problem. I've added the code line to update the color. Although the color does not change. I tried hardcoding the color attribute to "#ffffff" with no luck either. If the syntax looks right above, I will try to isolate it to determine if something else is interfering with it.

Thanks,
Todd.

answered on 17 Jul 2010, 06:39 AM

Hi Nikolay,

I have narrowed it down to a single property. When setting the NavigateUrl on the web service call -- the color is not set. When I comment the NavigateUrl property, it works just fine. I have copied the code below.

We are currently using version:

Telerik Web UI

2009.3.1208.35

Any workarounds or suggestions would be greatly appreciated.

Thanks,
Todd.

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

RadPanelItem panelItem = new RadPanelItem();

panelItem.Text = "Test PanelItem";

panelItem.Expanded = true;

panelItem.PreventCollapse = true;

RadTreeView tree = new RadTreeView();

tree.EnableViewState = true;

tree.WebServiceSettings.Path = "~/WebService1.asmx";

tree.WebServiceSettings.Method = "LoadNodes";

tree.OnClientNodeDataBound = "NavOnClientNodeDataBoundHandler";

panelItem.Controls.Add(tree);

NavPanelBar.Items.Add(panelItem);

RadTreeNode testNode = new RadTreeNode();

testNode.Text = "test node";

testNode.ForeColor = System.Drawing.ColorTranslator.FromHtml("#FF0000");

testNode.ExpandMode = TreeNodeExpandMode.WebService;

tree.Nodes.Add(testNode);

}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<title></title>

</head>

<body>

<script type="text/javascript">

function NavOnClientNodeDataBoundHandler(sender, e)

{

var node = e.get_node();

node.set_toolTip(node.get_attributes().getAttribute("ToolTip"));

node.get_element().style.color = node.get_attributes().getAttribute("Color");

}

</script>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="PageScriptManager" runat="server" ScriptMode="Release" EnablePartialRendering="true" />

<div>

<telerik:RadPanelBar runat="server" ID="NavPanelBar" Width="150" >

<ExpandAnimation Type="None"></ExpandAnimation>

<CollapseAnimation Type="None"></CollapseAnimation>

<Items />

</telerik:RadPanelBar>

</div>

</form>

</body>

</html>

namespace TreeNodeForeColor

{

/// <summary>

/// Summary description for WebService1

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class WebService1 : System.Web.Services.WebService

{

[WebMethod(EnableSession = false)]

public RadTreeNodeData[] LoadNodes(RadTreeNodeData node, object context)

{

List<RadTreeNodeData> result = new List<RadTreeNodeData>();

RadTreeNodeData childNode = new RadTreeNodeData();

childNode.Text = "test child";

childNode.Attributes.Add("ToolTip", "test tooltip");

childNode.Attributes.Add("Color", "#FF0000");

//Comment this line and the color is set properly.

childNode.NavigateUrl = "http://www.yahoo.com";

result.Add(childNode);

return result.ToArray();

}

Accepted

answered on 21 Jul 2010, 03:22 PM

Hi Todd A,

I have good news for you, I was able to resolve the problem!
The only thing you need to change is the domElement that's color should be changed.
Previously you were taking the domElement of the Node ("<li..."), and changing it's color automatically was applied on the text of the node (in case of a standard load rendered as span), but when the nodes are loaded through web service their text is rendered differently (anchors) and the change in the node's domElement color doesn't result in changing the color of the text (currently anchor).
That's why you need to get the domElement of Node.Text.
Here is how the JavaScript function looks like:

function NavOnClientNodeDataBoundHandler(sender,e) {

var node=e.get_node();

node.set_toolTip(node.get_attributes().getAttribute("ToolTip"));

node.get_textElement().style.color=node.get_attributes().getAttribute("Color");

}

Hope this is going to help you!

Regards,
Nikolay Tsenkov
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to change the Forecolor of the node with web services

9 Answers, 1 is accepted