绑定Telerik的RadTreeView客户端 [英] Binding a Telerik RadTreeView client side

问题描述

我有，我想它来填充RadTreeView对象的JavaScript数组。
我无法弄清楚如何从客户端以外的其他手工写我自己的绑定方法我收藏的对象做到这一点。

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阵列中的每个对象都有

Each object in my javascript array has

标识
的ParentId
值
文本

Id ParentId Value Text

请问有没有办法从客户端上的这个JavaScript数据结构自动填充整个目录树？
我有1 * 1做到这一点？通过遍历我的数组和递归下降树？

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?

我在使用Web服务来获取这个数据的JSON对象，我想全力打造的树，而不仅仅是扩大节点上。

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方法调用。

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>

您GetRootNodes方法是这样的：

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客户端的方法是这样的：

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

}

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

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;
}

注意0 上面的方法不返回RadTreeNodeData的数组。它可以是自己的自定义对象的任意集合。这同样适用于 GetRootNodes 这只是我复制了一个来自Telerik的网站;）

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 ;)

注1：我也有类似的情况曾经和我使用的加载第一级节点的这种技术最初和客户端点击加载他人。一些code我张贴在这里的是我原来的code的简化版本。

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.

我希望它能帮助。

这篇关于绑定Telerik的RadTreeView客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！