Reload the root of a treeview

[Mark]

Hi!

I have the following code:

<div id="main-section-header" class="row">
    <h2 id="team-efficiency" class="col-xs-3">Security Groupings</h2>
    <div style="clear:both;"></div>
</div>

<script type="text/javascript">
    $(document).ready(function() {

    });

    function addClick(e) {
        e.preventDefault();

        var dialog = $("#addGrouping").data("kendoWindow");
        dialog.center();
        dialog.open();
    }

    function getSelectedIndex() {
        var selectedIndex = $("#securityGroupings").data('kendoDropDownList').select();

        if (selectedIndex == -1)
            selectedIndex = 0;
        alert("blablabla")
        var expandedNode = $('#expandedNode').val();
        return { selectedGroup: selectedIndex, selectedNode : expandedNode}
    }

    function onDropDownChanged(e) {
        var treeView = $('#treeView').data('kendoTreeView');
        treeView.dataSource.read();
        alert('treeview refreshed');
    }

    function onDataBound(e) {
        var dropDown = $("#securityGroupings").data('kendoDropDownList');

        var selected = dropDown.select();
        alert('onDataBoundCalled: ' + selected);
        if (dropDown.select() == -1)
        {
            this.select(0);
            this.trigger("change");
        }
    }

    function onExpanded(e) {
        var tree = $('#treeView').data('kendoTreeView');
        var data = tree.dataItem(e.node);
        $("#expandedNode").val(data.id);
    }

</script>

<div class="panel panel-default">
    <h1> Select a security grouping</h1>
    <p>

        @(Html.Kendo().Button()
              .Name("addButton")
              .Content("<i class='fa fa-plus rd-k-med-icon'></i> Add")
              .Events(e => e.Click("addClick")))

        @(Html.Kendo().DropDownList()
              .Name("securityGroupings")
              .DataTextField("Name")
              .DataValueField("Id")
              .SelectedIndex(0)
              .Events(e => e.Change("onDropDownChanged"))
              .Events(e => e.DataBound(("onDataBound")))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetSecurityGroupings", "SecurityGrouping");
                  });
              })
              .HtmlAttributes(new {style = "width: 50%"})

              
              )
    </p>

    @Html.Hidden("expandedNode")

    @(Html.Kendo().TreeView()
        .Name("treeView")
        .DataTextField("Name")
        .Events(e => e.Expand("onExpanded"))
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("GetRootGrouping", "SecurityGrouping").Data("getSelectedIndex")
            )
        )
        .Checkboxes(checkboxes => checkboxes
                .Name("checkedFiles")
                .CheckChildren(false))

    )
</div>

@(Html.Kendo().Window()
    .Name("addGrouping")
    .Title("Security Grouping")
    .Actions(a => a.Clear())
    .LoadContentFrom("OpenNewGrouping"))

 

I am populating the contents of a TreeView with the contents of a DropDownList. The function onDropdownChanged works as expected if the TreeView is at the root level but if a node is expanded then it just returns the children of the old root and ignores the newly selected root.

 

 

Any help is appreciated :)

 

[Mark]

I've fixed this, the problem I was having was I wasn't resetting the expanded node hiddenfield:

 

    function onDropDownChanged(e) {
        var treeView = $('#treeView').data('kendoTreeView');
        $("#expandedNode").val(null);
        treeView.dataSource.read();
        alert('treeview refreshed');
    }