Help with code to expand nodes based on node's data attribute "ExpandFolder" value.

[Gil]

Would someone be able to offer any suggestions on how to display TreeView with certain node paths already expanded based on a "expandFolder" boolean attribute that is returned in the Remote_Data_Binding controller?

I'm using code similar to the below example with an additional "expandFolder" boolean attribute on the database.
https://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding

 

Additionally, when a user clicks a node, the tree needs to fully expand any child nodes whose "expandFolder" is true.

I saw some posts about an "expand: true" setting topic but couldn't figure out how to use that approach with the LoadOnDemand treeview pulling from remote data binding.  I also saw some uses with expandPath.  However, I was hoping there's a way to use the existing node data without having to re-traverse the entire tree since I already set the expandFolder in the Controller?

Thanks in advance for any help,

Gil

 

 

 

[Joana]

Hello Gil,

Have a look at the following example which illustrate how to expand selected node asynchronously with its nested children. You could further modify the logic to make it rely on expandFolder boolean attribute:

https://docs.telerik.com/aspnet-mvc/helpers/treeview/how-to/expand-node-async

And only the javascript implementation:

https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/nodes/node-async-expand

I hope this will fit to your scenario.

Regards,
Joana
Progress Telerik

[Gil]

Thank you Joana.  Works great!

 

 

[Gil]

The above solution works great.  The "Expand All" button works great but requires user to click the root node and then the "Expand All" button.  I have an additional need/requirement whereby certain trees need to auto-expand the root nodes.  Meaning, once hierarchical treeview is loaded, the tree should auto-expand all nodes completely or until node.expand = false.

Can someone provide a suggestion to do this? 

The algorithm would go something like:
1. TreeView loads on-demand as above.
2. Collect all of the Root Nodes.
3. Recursively expand each Root Node until node.expand = false

I'm currently seeking code on how to implement the above functionality.  Any help appreciated!

Thanks,

Gil

 

 

[Dimitar]

Hello Gil,

You could modify the expand async method to be executed in the TreeView DataBound event in order to expand all nodes after the page loads and the component is bound to its remote data:

@(Html.Kendo().TreeView()
  .Name("treeview")
  ...
  .Events(events => events
    .DataBound("onDataBound")
  )
)

<script>
  function expandNode(node) {
    var tree = $("#treeview").data("kendoTreeView"),
        dataItem = node;

    var load = function (item) {
        var that = this,
            chain = $.Deferred().resolve();

        chain = chain.then(function () {
            that.expand(that.findByUid(item.uid));
            return item.load();
        }).then(function () {
            if (item.hasChildren) {
                var childrenChain = $.Deferred().resolve();

                item.children.data().forEach(function (child) {
                    (function (child) {
                        childrenChain = childrenChain.then(function () {
                            return load.bind(that)(child);
                        })
                    })(child)
                })

                return childrenChain;
            }
        });

        return chain;
    }

    load.bind(tree)(dataItem);
  }

  function onDataBound(e) {
    if(e.node == undefined) {
      var data = tv.dataSource.data();

      for(var i = 0; i < data.length; i += 1) {
        var item = data[i];

        expandNode(data[i]);
      }
    }
  }
</script>

In terms of the additional condition where nodes need to be expanded until a certain model property is set to false, this could be added as a condition in the DataBound event handler:

function onDataBound(e) {
  if(e.node == undefined) {
    var data = tv.dataSource.data();

    for(var i = 0; i < data.length; i += 1) {
      var item = data[i];

      if (item.expand == true) {
        expandNode(data[i]);
      }
    }
  }
}

Regards,
Dimitar
Progress Telerik

[Gil]

Works great!  Thanks Dimitar!

I did have to make a slight modification to get the data like so:

    var data = $("#treeview").data("kendoTreeView").dataSource.data();

The above line seems rather long, is there a shortcut?

[Dimitar]

Hello Gil,

The alternative for retrieving the widget instance is through the getKendo* method:

var treeview = $("#treeview").getKendoTreeView();

You can refer to the following documentation article for additional information regarding the methods and events for getting a widget reference:

• https://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods

Regards,
Dimitar
Progress Telerik