Привязка клиентской части Telerik RadTreeView - PullRequest
Новая
       20

Привязка клиентской части Telerik RadTreeView

3 голосов
/ 18 октября 2011

У меня есть массив объектов javascript, который я хотел бы использовать для заполнения RadTreeView.Я не могу понять, как сделать это со стороны клиента, кроме как вручную написать свой собственный метод привязки для моей коллекции объектов.

Каждый объект в моем массиве javascript имеет

Id ParentId ValueТекст

Нет ли способа автоматически заполнить все дерево из этой структуры данных javascript на стороне клиента?Должен ли я сделать это 1 на 1?Проходя через мой массив и рекурсивно спускаясь по дереву?

Я использую веб-сервис для получения объекта JSON с этими данными и хочу полностью построить дерево, а не только на расширенном узле.

Ответы [ 2 ]

5 голосов
/ 18 октября 2011

Очевидно, что нет способа связать все дерево со стороны клиента.Максимум, что вы можете сделать - это связать узлы первого уровня, и, когда пользователь нажимает на каждый из них, вы можете заполнить дочерние узлы, выполнив другой вызов веб-метода. 

<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: У меня был похожий сценарий, и я использовал эту технику загрузки первого уровняузлы изначально и загрузка остальных по клику клиента.Часть кода, который я разместил здесь, является уменьшенной версией моего исходного кода.

Надеюсь, это поможет.

2 голосов
/ 18 октября 2011

Согласно документации клиентское свойство Nodes доступно только для чтения:

Клиентский объект RadTreeView

...