Setting Additional Properties to the Node in the Web Service

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

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

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

   public class CustomRadTreeNodeData : RadTreeNodeData 
   { 
   public string ToolTip;
   }   
   

2. Define the WebMethod as follows:

   [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();
   } 
   

3. Set the tooltip of the node in the OnClientNodeDataBound event:

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:

{"**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

1. Add the ToolTip custom attribute:

   [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();
   } 
   

2. Set the tooltip of the node in the OnClientNodeDataBound event:

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:

{"**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