同一页面上的两个 Kendo UI TreeView答案

【问题标题】：Two Kendo UI TreeView on the same page同一页面上的两个 Kendo UI TreeView
【发布时间】：2012-11-05 13:25:22
【问题描述】：

我正在使用 Kendo UI MVC 扩展。我在页面上有一个树视图

<script type="text/x-kendo-tmpl" id="template">
    <div class="form">
        <h3>${Name}</h3>
    </div>
</script>

@(Html.Kendo().ListView(Model)
      .Name("formsList")
      .ClientTemplateId("template")
      .TagName("div")
      .BindTo(Model)
      .DataSource(dataSource => dataSource
      .Model(model =>
          { 
              model.Id(p => p.Id);
              model.Field(p => p.Name);
              model.Field(p => p.Fields);
          }))
      .Pageable()
      .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))
      .Events(events => events.Change("onChange")))

当我单击项目时，我想在下面单独的 TreeView 中的模型中显示 Fields 属性。

到目前为止我有这样的代码

<script type="text/javascript">
    function onChange(arg) {
        var dataSource = $("#formsList").data("kendoListView");
        var index = dataSource.select().index();
        var dataItem = dataSource.dataSource.view()[index];

        alert(dataItem.Fields);
    }
</script>

我可以获取所选数据项的Fields属性，但是我应该如何将它传递给第二个TreeView？

【问题讨论】：

标签： c# asp.net-mvc telerik telerik-mvc kendo-ui

【解决方案1】：

原则上，您需要将所选项目分配为第二个 Kendo TreeView 的数据源，或直接分配给您第一个 TreeView 使用的数据源。（您在询问树视图，而您的示例显示了列表视图？）

<div id="treeview"></div>
<script type="text/javascript">

var myDataSource = new kendo.data.DataSource({
                        data: dataSource.dataSource.view()[index]});     
$("#treeview").kendoTreeView({
                  dataSource: myDataSource 
                }).data("kendoTreeView");

【讨论】：