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

Question

J'ai un tableau JavaScript d'objets que je voudrais utiliser pour remplir un RadTreeView. Je ne peux pas comprendre comment accomplir cela du côté client autre que l'écriture manuelle ma propre méthode de liaison pour ma collection d'objets.

Chaque objet dans mon tableau Javascript

Id ParentId Valeur Texte

est-il pas possible de remplir automatiquement un arbre entier de cette structure de données javascript côté client? Est-ce que je dois faire 1 par 1? En parcourant mon tableau et va récursivement dans l'arbre?

J'utilise un service Web pour obtenir un objet JSON avec ces données et je voudrais construire l'arbre complètement, et pas seulement sur le nœud étendu.

Answer 1

Apparemment, il n'y a aucun moyen de lier un arbre entier du côté client. Le plus que vous pouvez faire est bind nœuds de premier niveau et que l'utilisateur clique sur chacun, vous pouvez remplir les nœuds enfants faire une autre méthode Web appel.

<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 méthode GetRootNodes 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 méthode côté client 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 renvoie pas un tableau de RadTreeNodeData. Il peut être une collection de vos propres objets personnalisés. Idem pour le GetRootNodes il est juste que je copiais que l'un sur le site Web de Telerik;)

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

J'espère que ça aide.

Answer 2

Selon la documentation du côté client propriété Nodes est en lecture seule:

L'objet client RadTreeView