Question

I am using Kendo UI MVC extensions. I have one treeview on the page

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

When I click on the item I want to show Fields property in my Model in the separate TreeView down below.

So far I have such code

<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>

I can get the Fields property of the selected dataItem, but how should I pass it to the second TreeView?

Answer 1

In principle you need to assign you selected item as a Datasource of the second Kendo TreeView or directly to the Datasource used for you first TreeView. (you are asking about treeview and you example shows 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");