This is a migrated thread and some comments may be shown as answers.
expandTo() not working after collapse()
1 Answer 28 Views
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 19 Mar 2018, 05:14 PM

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>

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 21 Mar 2018, 04:42 PM
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.
Asked by
Josh
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or