Unable to expand the treeview menu for remote datasource

[Deenadhayalan]

Hi Team,

I have a requirement to show the menu items as a Treeview from the database. I am able to bring the items to the without any issues. The problem I am facing here is, it's not auto-expanding by default even after the Expandall(true) function in  component. Even I tried to achieve this functionality using Javascript. But, it is not working since Javascript is executing before the . My code is,

@(Html.Kendo().TreeView()
                    .Name("treeview")
                    .DataTextField("Name")
                    .ExpandAll(true) //This expandall is not working here.
                    .DataSource(dataSource => dataSource
                        .Read(read => read
                            .Action("ReadMenuItem", "GroupWellness")
                        )
                    )
                    .Events(events=> events
                           .Select("onSelect")
                           )
         )

Java script function  //Below function is executing before the data loads in the above tree. So, it is not expanding.

$(document).ready(function () {
            $("#treeview").kendoTreeView({
                dataBound: function (e) {
                    var treeView = $('#treeview').data('kendoTreeView');
                    treeView.expand(".k-item");
                 }
            });
    });

After all this methods is not working, I thought of achieving the same treeview using kendo UI JQuery. But, there I am it is throwing 404 error while reading my URL. JQuery part is,

var dataSource = new kendo.data.HierarchicalDataSource({
           transport: {
                read: {
                    url: '/GroupWellness/ReadMenuItem', //I am facing 404 error here while reading my data source.
                    dataType: "jsonp"
                }
            }
        });

        $("#treeview").kendoTreeView({
            dataSource: dataSource
        });

Please help me to achieve Expand all functionality by default based on my requirement.

[Dimitar]

Hello,

I have inspected the provided code snippets and noticed that the JavaScript code is actually re-initializing the already existing TreeVIew widget:

$("#treeview").kendoTreeView({
  dataBound: function (e) {
    var treeView = $('#treeview').data('kendoTreeView');
    treeView.expand(".k-item");
  }
});

As a result, all of the already defined options through the HtmlHelper are being overridden, thus leading to the observed behavior. To fix, the issue and expand the nodes on DataBound event, the HtmlHelper could be used as follows:

@(Html.Kendo().TreeView()
  .Name("treeview")
  .DataTextField("Name")
  .DataSource(dataSource => dataSource
    .Read(read => read
      .Action("ReadMenuItem", "GroupWellness")
    )
  )
  .Events(events=> events
    .Select("onSelect")
    .DataBound("onDataBound")
  )
)

<script>
  function onDataBound(e) {
    var treeviewInstance = e.sender;

    treeviewInstance.expand(".k-item");
  }
</script>

Regards,
Dimitar
Progress Telerik