Как автоматически установить столбец Kendo TreeList на Expand и OnCollapse? - PullRequest
Новая
       60

Как автоматически установить столбец Kendo TreeList на Expand и OnCollapse?

0 голосов
/ 09 октября 2018

У меня есть Kendo TreeList.Событие свертывания связано с методом onCollapse(), событие раскрытия связано с методом onExpand().

Другими словами: первый столбец состоит из уровней.Уровень по умолчанию равен 0, он расширяется по умолчанию и показывает (все его дочерние элементы) все строки уровня 1. При развертывании строки уровня 1 отображаются его дочерние элементы (уровень 2).В то же время столбец должен немного растянуться (чтобы показать номер следующего уровня).При развертывании другой строки уровня 1 столбец не нужно растягивать, но при расширении строки уровня 2 первый столбец необходимо снова растянуть для отображения уровня 3 и т. Д.

Поэтому я использую treeList.autoFitColumn(0).Это приводит к автоматическому подгонке после каждого второго расширения, когда я расширяю строки одного и того же уровня (это не то, чего я ожидаю, потому что расширение того же уровня означает, что столбец действительно увеличивался после первого расширения, но не после второго расширения.

Anальтернативой может быть изменение ширины вручную, но я не могу найти что-то вроде treeList.columns[0].setWidth(x).

1 Ответ

0 голосов
/ 11 октября 2018

Поведение, которое вы видите, происходит из-за того, что события collapse и expand срабатывают до того, как ширина контента фактически изменится.

Что вы можете сделать, чтобы обойти это, это «задержать»автоподгонка до тех пор, пока текущий код не завершит работу.Вы делаете это, используя 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>
...