Привязывание к клиентской стороне Telerik Radtreeview
-
22-10-2019 - |
Вопрос
У меня есть массив JavaScript объектов, которые я хотел бы использовать для заполнения RadtreeView. Я не могу понять, как сделать это со стороны клиента, кроме как вручную писать свой собственный метод привязки для моей коллекции объектов.
У каждого объекта в моем массиве JavaScript есть
ID ParentId Value Text
Нет ли способа автоматически заполнить целое дерево из этой структуры данных JavaScript на стороне клиента? Я должен сделать это 1 на 1? Переставая мой массив и рекурсивно спускаясь по дереву?
Я использую веб -сервис, чтобы получить объект JSON с этими данными, и я хотел бы полностью построить дерево, а не только на расширенном узле.
Решение
Видимо, нет никакого способа связать целое дерево со стороны клиента. Больше всего вы можете сделать,-это привязать узлы первого уровня, и, поскольку пользователь нажимает на каждую, вы можете заполнить дочерние узлы, делая другой вызов веб-метода.
<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
Просто я скопировал это с веб -сайта Телерика;)
Примечание 1: Однажды у меня был аналогичный сценарий, и я использовал эту технику загрузки узлов первого уровня и загрузки других на клиент. Некоторая часть кода, который я разместил здесь, является тонкой версией моего оригинального кода.
Я надеюсь, что это помогает.
Другие советы
В соответствии с документацией стороной клиента Nodes
свойство только для чтения: