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