Binding a Telerik RadTreeView client side

Question

I have a javascript array of objects that I would like to use to populate a RadTreeView. I can't figure out how to accomplish this from the client side other than manually writing my own binding method for my collection of objects.

Each object in my javascript array has

Id ParentId Value Text

Is there no way to automatically populate an entire tree from this javascript data structure on the client side? Do I have to do this 1-by-1? By traversing my array and recursively going down the tree?

I'm using a web service to get a JSON object with this data and I would like to build the tree fully, not just on the expanded node.

Answer 1

Apparently, there's no way to bind an entire tree from the client side. The most you can do is bind first-level nodes and as the user clicks on each one, you can populate the child nodes making another web method call.

<telerik:RadTreeView OnClientNodeClicking="PopulateChild" DataTextField="Text" 
                            ID="datesTree" runat="server">
                            <WebServiceSettings Path="../AcmeWebService.asmx" Method="GetRootNodes" />
  <Nodes>
    <telerik:RadTreeNode Text="Root Node" ImageUrl="../images/truckicon.png"  ExpandMode="WebService" />
  </Nodes>
</telerik:RadTreeView>

Your GetRootNodes method can look like this:

[WebMethod, ScriptMethod]
public RadTreeNodeData[] GetRootNodes(RadTreeNodeData node, object context)
{
    DataTable productCategories = GetProductCategories(node.Value);
    List<RadTreeNodeData> result = new List<RadTreeNodeData>();
    foreach (DataRow row in productCategories.Rows)
    {
        RadTreeNodeData itemData = new RadTreeNodeData(); 
        itemData.Text = row["Title"].ToString(); 
        itemData.Value = row["CategoryId"].ToString();
        if (Convert.ToInt32(row["ChildrenCount"]) > 0) 
        { 
            itemData.ExpandMode = TreeNodeExpandMode.WebService; 
        }
        result.Add(itemData);
    }
    return result.ToArray();
}

PopulateChild client-side method can be something like:

function PopulateChild(sender, args) {
var treeView = $find('datesTree');

    var nodeText = "";

    $.ajax({
        type: "POST",
        url: "../AcmeWebService.asmx/GetChildNodes",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{'nodeText': '" + nodeText + "','nodeValue': '" + args.get_node().get_value() + "','param2':'" + treeView.get_allNodes()[0].get_value() + "' }",
        success: function(msg) {
            if (treeView != null) {
                treeView.trackChanges();
                var parent = treeView.get_selectedNode() || treeView;
                var count = parent.get_nodes().get_count();
                for (var i = 0; i < msg.d.length; i++) {
                    var node = new Telerik.Web.UI.RadTreeNode();                                                
                    node.set_text(msg.d[i].Text);
                    node.set_value(msg.d[i].ParentID);
                    node.set_expanded(true);
                    parent.get_nodes().add(node);
                }
                treeView.commitChanges();
            }
        }
    });

}

And on the web service method to populate the child nodes can be something like:

[WebMethod, ScriptMethod]
public IEnumerable<YourNode> GetChildNodes(string nodeText, string nodeValue, int param2)
{
   //call your DAL with any parameter you passed in from above
   IEnumerable<YourNode> nodes = ...
   return nodes;
}

Note 0 The method above does not return an array of RadTreeNodeData. It can be any collection of your own custom objects. Same goes for the GetRootNodes it's just that I copied that one from Telerik's website ;)

Note 1: I had a similar scenario once and I used this technique of loading first-level nodes initially and loading the others on client click. Some of the code I posted here is a slimmed down version of my original code.

I hope it helps.