如何自动调整 Kendo TreeList 列 onExpand 和 onCollapse？

Question

我有一个 Kendo TreeList。折叠事件绑定到 onCollapse() 方法，展开事件绑定到 onExpand() 方法。

换句话说：第一列由级别组成。默认级别为 0，默认展开并显示（所有子项）级别 1 的所有行。展开级别 1 行时，会显示其子项（级别 2）。同时，该列必须拉伸一点（以显示下一级编号）。当展开另一个1级行时，该列不需要拉伸，但是当展开2级行时，第一列必须再次拉伸以显示3级等等。

因此，我使用treeList.autoFitColumn(0)。每当我扩展相同级别的行时，这会导致在每秒扩展后自动适应（这不是我所期望的，因为扩展相同级别意味着列在第一次扩展后增长但在第二次扩展后没有增长。

另一种方法是手动更改宽度，但我找不到类似 treeList.columns[0].setWidth(x) 的内容。

Answer 1

您看到的行为之所以发生，是因为 collapse 和 expand 事件在内容宽度实际改变之前触发。

要避免这种情况，您可以做的是 "delay" 自动调整，直到当前代码完成运行。您可以通过使用 setTimeout 和 0 超时来执行此操作。这会将函数的执行置于执行队列末尾的 setTimeout 中。

查看演示片段。

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

如何自动调整 Kendo TreeList 列 onExpand 和 onCollapse？

How to autofit Kendo TreeList column onExpand & onCollapse?

javascript

kendo-ui

kendo-grid

kendo-treelist