Reload the root of a treeview

2 posts, 0 answers
  1. Mark
    Mark avatar
    3 posts
    Member since:
    May 2016

    Posted 31 Aug Link to this post

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

     

  2. Mark
    Mark avatar
    3 posts
    Member since:
    May 2016

    Posted 31 Aug in reply to Mark Link to this post

    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');
        }

  3. Kendo UI is VS 2017 Ready
Back to Top