两个Kendo UI TreeView在同一页面上

时间:2012-11-05 13:25:22

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

我正在使用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>

我可以获取所选dataItem的Fields属性,但是如何将它传递给第二个TreeView?

1 个答案:

答案 0 :(得分:1)

原则上,您需要将所选项目指定为第二个Kendo TreeView的数据源,或直接指定给第一个TreeView使用的数据源。 (你问的是树视图,你的例子显示了listview?)

<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");