如何为 kendoui treelist 手动设置数据答案

【问题标题】：How to manually set data for kendoui treelist如何为 kendoui treelist 手动设置数据
【发布时间】：2016-04-09 23:08:24
【问题描述】：

我想在运行时为 kendoui 树列表设置数据源。请检查以下example。如果我在设计时设置数据源，我可以看到控件中的数据。但是如果我尝试在运行时设置数据源，我看不到控件中的数据。

<div id="treeList"></div>
<script>
  var data = [ { name: "Jane Doe" }, { name: "John Doe" }];

    var dataSource = new kendo.data.TreeListDataSource({
      data: [ { name: "Jane Doe" }, { name: "John Doe" }]
    });
    $("#treeList").kendoTreeList({
      columns: [
          { field: "name" },
          { command: [{ name: "edit" }] }
      ],
      editable: true
      //,dataSource: dataSource
    });
  var grid = $("#treelist").data("kendoTreeList");
  grid.setDataSource( dataSource);
  grid.dataSource = dataSource;
   grid.dataSource.read();
  grid.dataSource.data(data);
</script>

【问题讨论】：

@The_Black_Smurf：我已经包含了代码。它也可以在小提琴中使用。

标签： kendo-ui telerik kendo-grid kendo-treelist

【解决方案1】：

问题似乎出在选择器本身。您的逻辑没问题，但由于某种原因，data("kendoTreeList") 返回的对象为空。在kendoTreeList 初始化之后，我更新了您的代码以链接data。

var dataSource = new kendo.data.TreeListDataSource({
  data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});

var grid = $("#treeList").kendoTreeList({
  columns: [
      { field: "name" },
      { command: [{ name: "edit" }] }
  ],
  editable: true
}).data("kendoTreeList");

grid.setDataSource(dataSource);

说起来有点奇怪，但我认为你的代码和我的代码是等价的。显然不是，但我不知道为什么。

【讨论】：

谢谢。我认为这条线 .data("kendoTreeList"); 就在最后有所作为。
是的，它是...这里的主要问题是为什么您的行 var grid = $("#treelist").data("kendoTreeList"); 也没有返回 kendoTreeList 对象。

【解决方案2】：

您的主要问题是您将 DOM 元素的 id 设置为“treeList”。

var grid = $("#treelist").data("kendoTreeList");

正如您在此处看到的，您在设置网格变量时使用全部小写。那是你唯一的问题。它应该是这样的：

var grid = $("#treeList").data("kendoTreeList");

【讨论】：