javascript 绑定 Telerik RadTreeView 客户端

Binding a Telerik RadTreeView client side

提问by Matt

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.

我有一个 javascript 对象数组，我想用它来填充 RadTreeView。除了手动为我的对象集合编写自己的绑定方法之外，我无法弄清楚如何从客户端完成此操作。

Each object in my javascript array has

我的 javascript 数组中的每个对象都有

Id ParentId Value Text

Id ParentId 值文本

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?

有没有办法在客户端从这个 javascript 数据结构自动填充整个树？我必须 1 对 1 这样做吗？通过遍历我的数组并递归地沿着树向下走？

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.

我正在使用 Web 服务来获取包含这些数据的 JSON 对象，并且我想完全构建树，而不仅仅是在扩展节点上。

回答by Icarus

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.

显然，没有办法从客户端绑定整个树。您最多可以绑定第一级节点，当用户单击每个节点时，您可以填充子节点以进行另一个 Web 方法调用。

<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:

您的 GetRootNodes 方法可能如下所示：

[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:

PopulateChild 客户端方法可以是这样的：

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:

在 Web 服务方法上填充子节点可以是这样的：

[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 0The method above does not return an array of RadTreeNodeData. It can be any collection of your own custom objects. Same goes for the GetRootNodesit's just that I copied that one from Telerik's website ;)

注 0上述方法不返回 RadTreeNodeData 数组。它可以是您自己的自定义对象的任何集合。也一样，GetRootNodes只是我从 Telerik 的网站上复制了那个 ;)

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.

注 1：我曾经有过类似的场景，我使用了这种技术，最初加载第一级节点并在客户端单击时加载其他节点。我在这里发布的一些代码是我原始代码的精简版。

I hope it helps.

我希望它有帮助。

回答by rick schott

According the documentation the client side Nodesproperty is Read-Only:

根据文档，客户端Nodes属性是只读的：

The RadTreeView client object

RadTreeView 客户端对象