Binding a Telerik RadTreeView client side

会有一股神秘感。 提交于 2019-12-21 20:15:15

问题


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.


回答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.




回答2:


According the documentation the client side Nodes property is Read-Only:

The RadTreeView client object



来源:https://stackoverflow.com/questions/7801185/binding-a-telerik-radtreeview-client-side

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!