2011-10-18 102 views
3

我有一個javascript數組,我想用來填充RadTreeView。 我無法弄清楚如何從客戶端完成此操作,而不是手動爲我的對象集合編寫自己的綁定方法。綁定Telerik RadTreeView客戶端

每一個對象在我的javascript數組

標識 的ParentId 價值 文本

有沒有辦法從客戶端上的這個JavaScript數據結構自動填充整個目錄樹? 我必須做1-by-1嗎?通過遍歷我的數組並遞歸下去樹?

我正在使用Web服務來獲取帶有此數據的JSON對象,並且我想完全構建樹,而不僅僅是在展開的節點上。

回答

5

顯然,沒有辦法綁定從客戶端的整個樹。您可以做的最多的是綁定第一級節點,並且在用戶單擊每個節點時,您可以填充子節點進行另一個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> 

你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客戶端的方法是這樣的:

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

}

者和網絡服務方法填充子節點可以是這樣的:

[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的網站;)

注1:我也有類似的情況曾經和我使用的加載一級節點的這種技術最初和加載客戶端的人單擊。我在這裏發佈的一些代碼是我原始代碼的精簡版本。

我希望它有幫助。

+0

此外,您可以使用客戶端API創建節點(在第一級節點之後):http://www.telerik.com/help/aspnet-ajax/treeview-client-basics.html。使用trackChanges()和commitChanges()可以修改客戶端上的RadTreeView,但比使用上面的技術更麻煩。 – carlbergenhem

2

根據文檔中的客戶端Nodes屬性只讀:

The RadTreeView client object

+0

我認爲文檔引用了ASP.NET控件,而不是ASP.NET AJAX控件。他們是不同的東西。 – Icarus