La liaison d'une Telerik RadTreeView côté client

Apparemment, il n'y a aucun moyen de lier l'ensemble de l'arborescence du côté client. Le plus vous pouvez faire est de lier de premier niveau des nœuds et que l'utilisateur clique sur chacun d'eux, vous pouvez remplir les nœuds enfants de faire un autre appel de la méthode 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>

Votre GetRootNodes méthode peut ressembler à ceci:

[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 côté client de la méthode peut être quelque chose comme:

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

}

Et sur la méthode de service web pour remplir les nœuds enfants peut être quelque chose comme:

[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 La méthode ci-dessus ne permet pas de retourner un tableau de RadTreeNodeData. Il peut être n'importe quelle collection de vos propres objets personnalisés. En va de même pour la GetRootNodes c'est juste que j'ai copié que l'un de Telerik du site 😉

Note 1: j'ai eu un scénario semblable à une fois et j'ai utilisé cette technique de chargement de premier niveau des nœuds au départ de chargement et les autres sur le client, cliquez sur. Une partie du code que j'ai posté ici est une version allégée de mon code d'origine.

J'espère que cela aide.

OriginalL'auteur Icarus