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

7 posts, 0 answers
  1. Gil
    Gil avatar
    7 posts
    Member since:
    Jan 2014

    Posted 25 Oct 2018 Link to this post

    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

     

     

     

  2. Joana
    Admin
    Joana avatar
    205 posts

    Posted 29 Oct 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Gil
    Gil avatar
    7 posts
    Member since:
    Jan 2014

    Posted 31 Oct 2018 in reply to Joana Link to this post

    Thank you Joana.  Works great!

     

     

  4. Gil
    Gil avatar
    7 posts
    Member since:
    Jan 2014

    Posted 11 Jun Link to this post

    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

     

     

  5. Dimitar
    Admin
    Dimitar avatar
    684 posts

    Posted 13 Jun Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Gil
    Gil avatar
    7 posts
    Member since:
    Jan 2014

    Posted 13 Jun in reply to Dimitar Link to this post

    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?

  7. Dimitar
    Admin
    Dimitar avatar
    684 posts

    Posted 13 Jun Link to this post

    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:


    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top