expandTo() not working after collapse()

2 posts, 0 answers
  1. Josh
    Josh avatar
    7 posts
    Member since:
    Oct 2014

    Posted 19 Mar Link to this post

    I would like to collapse all of the nodes in the treeview and then expand the treeview to a specific node. I have found that when i call the collapse function like treeview.collapse('.k-item') and then try to call treeview.expandTo(dataItem) the treeview closes and does not expand to the node. In order to get it to work I have to delay the expandTo by using setTimout. This is not ideal. Any help would be appreciated.

    Dojo example: http://dojo.telerik.com/ATiXUbuC

     

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled</title>

      <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
      <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
      <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
      <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

      <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
      <script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
      <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
      <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script></head>
      
    <div id="example">

                <div class="demo-section k-content">
                    <h4>Inline data (default settings)</h4>
                    <div id="treeview-left"></div>
                  <button onclick='expandTo()'>Expand To</button>
                  <span><--works as expected</span><br/>
                  <button onclick='find()'>Collapse then expand to node</button>
                  <span><-- sometimes works on first time, but stops working</span><br/> 
                  <button onclick='findWithDelay()'>Collapse then expand to node (with delay)</button>
                  <span><-- works everytime
                  
                </div>

                <script>
                    var inlineDefault = new kendo.data.HierarchicalDataSource({
                        data: [
                            { text: "Furniture", items: [
                                { text: "Tables & Chairs" },
                                { text: "Sofas" },
                                { text: "Occasional Furniture" }
                            ] },
                            { text: "Decor", items: [
                                { text: "Bed Linen" },
                                { text: "Curtains & Blinds" },
                                { text: "Carpets" }
                            ] }
                        ]
                    });

                    $("#treeview-left").kendoTreeView({
                        dataSource: inlineDefault
                    });
                  
                  
                  //expandTo on its own works as expected
                  function expandTo(){
                    var treeView = $('#treeview-left').data('kendoTreeView');
                    var node = treeView.findByText('Sofas');
                    dataItem = treeView.dataItem(node);
                    treeView.expandTo(dataItem);
                  }
                  
                  //I want to close all the nodes and then expand the treeview to a specific node
                  //but calling expandTo after calling collapse doesn't work
                  function find(){
                    var treeView = $('#treeview-left').data('kendoTreeView');
                    treeView.collapse('.k-item');
                    var node = treeView.findByText('Sofas');
                    dataItem = treeView.dataItem(node);
                    treeView.expandTo(dataItem);
                  }
                  
                  //have to delay the expandTo call to make it work
                  function findWithDelay(){
                    var treeView = $('#treeview-left').data('kendoTreeView');
                    treeView.collapse('.k-item');
                    var node = treeView.findByText('Sofas');
                    dataItem = treeView.dataItem(node);
                    
                    //delay the expandTo for half a second
                    setTimeout(function(){treeView.expandTo(dataItem)}, 500);
                  }
      </script>

                <style>
                    #example {
                        text-align: center;
                    }

                    .demo-section {
                        display: inline-block;
                        vertical-align: top;
                        text-align: left;
                        margin: 0 2em;
                    }
                </style>
            </div>
    <body>
    </body>
    </html>

  2. Neli
    Admin
    Neli avatar
    208 posts

    Posted 21 Mar Link to this post

    Hello Josh,

    Thank you for reporting the problem.

    There is similar issue logged in our GitHub repository. Based on your example, I added additional scenario for reproduction to the issue. I also increased the priority of the bug. You can track our progress on resolving it on the following link. Until the bug is getting fixed, you could set a delay in order to expand the needed node, the way it is on clicking the 'Collapse then expand to node (with delay)' button.

    As a small sign of gratitude for reporting a bug I have updated your Telerik points. 

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top