Aking a un lado del cliente Telerik Radtreeview

Question

Tengo una matriz de objetos JavaScript que me gustaría usar para poblar una Radtreeview. No puedo entender cómo lograr esto desde el lado del cliente, además de escribir manualmente mi propio método vinculante para mi colección de objetos.

Cada objeto en mi matriz de JavaScript tiene

ID Texto de valor ParentId

¿No hay forma de poblar automáticamente un árbol completo de esta estructura de datos de JavaScript en el lado del cliente? ¿Tengo que hacer esto 1 por 1? Atravesar mi matriz y ir recursivamente por el árbol?

Estoy usando un servicio web para obtener un objeto JSON con estos datos y me gustaría construir el árbol completamente, no solo en el nodo expandido.

Answer 1

Aparentemente, no hay forma de unir un árbol completo del lado del cliente. Lo máximo que puede hacer es vincular los nodos de primer nivel y, a medida que el usuario hace clic en cada uno, puede llenar los nodos infantiles haciendo otra llamada del método 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>

Su método GetRootNodes puede verse así:

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

El método del lado del cliente PopulateChild puede ser algo así como:

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

}

Y en el método de servicio web para completar los nodos infantiles puede ser algo así como:

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

Nota 0 El método anterior no devuelve una matriz de radtreenodedata. Puede ser cualquier colección de sus propios objetos personalizados. Lo mismo ocurre con el GetRootNodes Es solo que copié ese del sitio web de Telerik;)

Nota 1: Tuve un escenario similar una vez y utilicé esta técnica de cargar nodos de primer nivel inicialmente y cargar a los demás en el clic del cliente. Parte del código que publiqué aquí es una versión adelgazada de mi código original.

Espero que ayude.

Answer 2

Según la documentación del lado del cliente Nodes La propiedad es de solo lectura:

El objeto del cliente Radtreeview