OnClick Разверните Kendo Treeview со всеми дочерними узлами

У меня уже есть представление в виде дерева, как показано во вложении, теперь мне нужно развернуть по нажатию кнопки, я знаю код для выполнения Expand, но он не расширяет полные дочерние узлы, вместо этого он выполняет только 1 непосредственный дочерний элемент, если у него есть еще ребенок, пожалуйста, помогите мне, как добиться одним щелчком мыши, чтобы развернуть все родительские и дочерние узлы. Это мой код:

        $("#expand").on("click", function(){
                var treeview = $("#treeview").data("kendoTreeView");
                    treeview.expand(".k-item");
        })

jquery kendo-ui kendo-treeview
person Kannan    schedule 23.10.2018    source источник
comment
Хотя это немного отличается, это должно быть то, что вы ищете: docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/   -  person Carsten Franke    schedule 23.10.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если вы вызываете метод раскрытия в древовидном представлении, он сворачивает все элементы:

var treeview = $("#treeview").kendoTreeView({
    dataSource: {
      data: [{
          text: "Item 1",
          expanded: true,
          items: [
            { 
               text: "Item 1.1", items: [ { text: "Item 1.4" }, { text: "Item 1.5" } ] 
            },
            { 
               text: "Item 1.2", items: [ { text: "Item 1.6" }, { text: "Item 1.7" } ] 
            },
            { 
               text: "Item 1.3", items: [{ text: "Item 1.8", items: [{ text: "Item 1.10" }, { text: "Item 1.11" } ] }, { text: "Item 1.9" } ] }
          ]
        },
        {
          text: "Item 2",
          items: [{ text: "Item 2.1" },
            { text: "Item 2.2" },
            { text: "Item 2.3" }
          ]
        },
        { text: "Item 3" }
      ]
    },
    loadOnDemand: false
  }).data("kendoTreeView"),

  handleTextBox = function(callback) {
    return function(e) {
      if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
        callback(e);
      }
    };
  };
  
$("#expand").click(function() {
  treeview.expand(".k-item");
});

$("#collapse").click(function() {
  treeview.collapse(".k-item");
});
html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

#wrapper {
    float: left;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}

#expand {
    float:left; /* add this */
    border: 1px solid red;
}

#collapse {
  border: 1px solid green;
  overflow: hidden; /* if you don't want #second to wrap below #first */
}
<!DOCTYPE html>
<html>
<head>
    
    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>
        <div id="treeview"></div>
        <div id="wrapper">
            <button id="expand" class="button1" >Expand button</button>
            <button id="collapse" class="button2" >Collapse button</button>
        </div>
</body>
</html>

person Stephan T.    schedule 23.10.2018
comment
Спасибо, Стефан, за ваш ответ, ваш ответ будет расширяться только на 1 уровень вниз. Если у меня более 1 ребенка уровня, он не будет расширяться, в моем случае у меня есть дети 9-го уровня вниз. Не могли бы вы сообщить мне, как это сделать? - person Kannan; 23.10.2018
comment
Нет, я отредактировал пример, чтобы было больше слоев, и он все еще работает. Может быть, вы построите свое древовидное представление ложным? - person Stephan T.; 24.10.2018
comment
Можете ли вы показать мне свой источник данных в вопросе и как вы инициализируете treeView? Я думаю, что ошибка в этом. Но я могу на 100% вас заверить, что мой ответ работает так, как должен и как вы просили :) - person Stephan T.; 25.10.2018