I have a Kendo TreeList. The collapse event is bound to an onCollapse() method, the expand event is bound to an onExpand() method.
In words: the first column consists of levels. The default level is 0 and is expanded as default and shows (all of it's children) all rows of level 1. When expanding a level 1 row, its children (level 2) are shown. At the same time, the column has to stretch a bit (to show the next level number). When expanding another level 1 row, the column does not need to stretch but when a row of level 2 is expanded, the first column has to stretch again for showing level 3 and so on.
Therefore, I use treeList.autoFitColumn(0). This causes an auto fit after every second expand whenever I expand rows of same level (that is not what I expect because expanding same level means the column did grow after the first expand but not after the second expand.
An alternative could be changing the width manually, but I cannot find something like treeList.columns[0].setWidth(x).
The behavior you are seeing is happening because the collapse and expand events are firing before the width of the content has actually changed.
What you can do to circumvent this is to "delay" the auto-fit until after the current code finished running. You do this by using setTimeout with a 0 timeout. This places the execution of the function inside the setTimeout at the end of the execution queue.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
resizable: true,
columns: [
{ field: "Name" },
{ field: "Text" }
],
dataSource: [
{ id: 1, Name: "Name 1", Text: "Sample text 1", parentId: null },
{ id: 2, Name: "Name 2", Text: "Sample text 2", parentId: null },
{ id: 3, Name: "Name 3", Text: "Sample text 3", parentId: 1 },
{ id: 4, Name: "Very long name 4", Text: "Sample text 4", parentId: 2 }
],
expand: function(e) {
setTimeout(() => treeList.autoFitColumn(0), 0);
},
collapse: function(e) {
setTimeout(() => treeList.autoFitColumn(0), 0);
}
});
var treeList = $("#treeList").data("kendoTreeList");
treeList.autoFitColumn(0);
</script>
</body>
</html>