Setting Additional Properties to the Node in the Web Service

Updated on Aug 24, 2026

Usually, the WebMethod of the WebService returns an array of RadTreeNodeData (help reference). RadTreeNodeData class has a limited number of properties:

C#

public class RadTreeNodeData : ControlItemData
{
    public RadTreeNodeData();
    public string ContentCssClass { get; set; }
    public string ContextMenuID { get; set; }
    public string CssClass { get; set; }
    public string DisabledCssClass { get; set; }
    public string DisabledImageUrl { get; set; }
    public string ExpandedImageUrl { get; set; }
    public TreeNodeExpandMode ExpandMode { get; set; }
    public string HoveredCssClass { get; set; }
    public string HoveredImageUrl { get; set; }
    public string ImageUrl { get; set; }
    public string NavigateUrl { get; set; }
    public bool PostBack { get; set; }
    public string SelectedCssClass { get; set; }
    public bool Checked { get; set; }
} 

So, these are the only properties you can set to the child nodes added from Web Service.

Imagine that you need to set a property that is not available in the RadTreeNodeData class - e.g. ToolTip. There are two approaches to do this:

First Approach - using a custom class

• Create a class that inherits the RadTreeNodeData class and add the ToolTop property to it:

C#

public class CustomRadTreeNodeData : RadTreeNodeData 
{ 
	public string ToolTip;
}	

• Define the WebMethod as follows:

C#

[WebMethod]
public CustomRadTreeNodeData[] GetNodesWithToolTips()
{
    List<CustomRadTreeNodeData> nodes = new List<CustomRadTreeNodeData>();

    for (int i = 1; i < 11; i++)
    {
        CustomRadTreeNodeData node = new CustomRadTreeNodeData();
        node.Text = "node " + i.ToString();
        node.ToolTip = "Tooltip for " + node.Text;
        nodes.Add(node);
    }

    return nodes.ToArray();
} 

• Set the tooltip of the node in the OnClientNodeDataBound event:

JavaScript

function OnClientNodeDataBoundHandler(sender, e) {
    var node = e.get_node();
    node.set_toolTip(e.get_dataItem().ToolTip);
}	

Here is the JSON output for the first child node:

JavaScript

{
    "**type": "CustomRadTreeNodeData",
    "ToolTip": "Tooltip for node 1",
    "ExpandMode": 0,
    "NavigateUrl": "",
    "PostBack": true,
    "CssClass": "",
    "DisabledCssClass": "",
    "SelectedCssClass": "",
    "ContentCssClass": null,
    "HoveredCssClass": "",
    "ImageUrl": "",
    "HoveredImageUrl": null,
    "DisabledImageUrl": "",
    "ExpandedImageUrl": "",
    "ContextMenuID": null,
    "Text": "node 1",
    "Value": "",
    "Enabled": true,
    "Attributes": {}
}

Second approach - using the Attributes collection

• Add the ToolTip custom attribute:

C#

[WebMethod]
public RadTreeNodeData[] GetNodesWithToolTips()
{
    List<RadTreeNodeData> nodes = new List<RadTreeNodeData>();

    for (int i = 1; i < 11; i++)
    {
        RadTreeNodeData node = new RadTreeNodeData();
        node.Text = "node " + i.ToString();
        node.Attributes["ToolTip"] = "new tooltip for " + node.Text;
        nodes.Add(node);
    }

    return nodes.ToArray();
} 

• Set the tooltip of the node in the OnClientNodeDataBound event:

JavaScript

function OnClientNodeDataBoundHandler(sender, e) {
    var node = e.get_node();
    node.set_toolTip(node.get_attributes().getAttribute("ToolTip"));
}

Here is the JSON output for the first child node:

JavaScript

{
    "**type": "Telerik.Web.UI.RadTreeNodeData",
    "ExpandMode": 0,
    "NavigateUrl": "",
    "PostBack": true,
    "CssClass": "",
    "DisabledCssClass": "",
    "SelectedCssClass": "",
    "ContentCssClass": null,
    "HoveredCssClass": "",
    "ImageUrl": "",
    "HoveredImageUrl": null,
    "DisabledImageUrl": "",
    "ExpandedImageUrl": "",
    "ContextMenuID": null,
    "Text": "node 1",
    "Value": "",
    "Enabled": true,
    "Attributes": {
        "ToolTip": "new tooltip for node 1"
    }
}

See Also

• Web Service Binding

• Tutorial on Web Service Binding