KendoUI TreeView 动态 JSON

Posted 2023-05-07

【中文标题】KendoUI TreeView 动态 JSON

【英文标题】：KendoUI TreeView Dynamic JSON

【发布时间】：2012-02-01 20:42:52

【问题描述】：

我正在尝试使用 Telerik 的 KendoUI，并从通用处理程序获取树视图以绑定到动态 JSON。

在我的通用处理程序中，我使用 Newtonsoft.Json 将 List 转换为我的 JSON 结果，效果很好，甚至可以与不同的 KendoUI 控件（图表）一起使用。

就构建树视图的 javascript 而言，这是我所拥有的：

var treeSource = new kendo.data.DataSource(
                transport: 
                    read: 
                        url: "Services/CategoryHandler.ashx",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        type: "GET"
                    
                
            );

            $("#treeview").kendoTreeView(
                dataSource: treeSource
            );

以下是返回 JSON 的简化示例：

[
   
      "text":"Node 1",
      "expanded":true,
      "items":null
   ,
   
      "text":"Node 2",
      "expanded":true,
      "items":null
   
]

“items”将是树中的子集合。

当我将项目直接添加到数据源时，例如：

var treeview = $("#treeview").kendoTreeView(
                            dataSource: [
                                 text: "Item 1", expanded: true, items: [
                                     text: "Item 1.1" ,
                                     text: "Item 1.2" ,
                                     text: "Item 1.3" 
                                ] ,
                                 text: "Item 2", items: [
                                     text: "Item 2.1" ,
                                     text: "Item 2.2" ,
                                     text: "Item 2.3" 
                                ] ,
                                 text: "Item 3" 
                            ]
                        )

它工作得很好。当我调用一个写出 JSON 的服务时，它只是不起作用，我的意思是它不起作用，没有数据显示，它是空白的。

对我可能遗漏的内容有任何想法，或者对如何验证我的数据甚至从服务返回甚至正确填充我的数据源有什么指导吗？

谢谢

【参考方案1】：

重要提示自 2012 年 11 月 8 日起，KendoUI 已经支持它。

Kendo TreeView 尚不支持绑定到数据源。好消息是，这已在计划中，并将很快实施（下一个版本）。

【讨论】：

好的，谢谢。我找到了一个解决方法，我做了一个 $.ajax GET 并使用字符串结果绑定到树视图。我期待 KendoUI 更新 :) 再次感谢。

KendoUI Grid 是否绑定到 HttpHandler？

【参考方案2】：

它对我有用。我在控制器上使用带有 Json 序列化的动态 ViewBag，因此，节点绘制得很好。

我的问题是事件似乎无法正常工作。例如，我想捕捉 onDrop 并发出警报以显示此类节点的实际值，而是显示所有节点的文本。顺便说一句，这让我发疯了。

这是我的代码，希望可以帮助到别人。

    function onDrop(e) 
        alert(treeView.text(e.sourceNode));
    

必须分配模板才能工作：

template: "<span rel='#= item.Id #'> #=item.text #</span>",