Kendo Treeview-如何在另一个Treeview中显示具有所有父节点的选定节点

Question

I have a kendo treeview with checkboxes and parents and child nodes. 我有一个带有复选框以及父级和子级节点的kendo树视图。 I need to copy the complete hierarchy of the checked node into another treeview. 我需要将已检查节点的完整层次结构复制到另一个树视图中。 ex - The root node, the parent node and the checked child node. ex-根节点，父节点和选中的子节点。

Below is my code, but i am only able to display child node and its parent node. 下面是我的代码，但是我只能显示子节点及其父节点。 I also need the root node and everytime, i select the child node, it needs to be appended if the parent and root are already selected 我还需要根节点，并且每次都选择子节点，如果已经选择了父节点和根节点，则需要附加子节点

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>

  <style>
    #treeview-left,
    #treeview-right
    {
      float: left;
      width: 220px;
      overflow: visible;
    }
    .demo-section {
      width: 500px;
    }
    .demo-section:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  </style>

</head>
<body>
  <div class="demo-section k-header">

      <div id="treeview-left"></div>

      <div id="treeview-right"></div>          
  </div>

  <button id="copy-nodes" class="k-button">Copy nodes</button>

      <script>

      $("#treeview-left").kendoTreeView({
          dragAndDrop: true,
          dataSource: [{
              "text": "RootNode",
              "expanded": true,
              "items": [{
                      "text": "Furniture",
                      "expanded": true,
                      "items": [{
                              "text": "Tables & Chairs"
                          },
                          {
                              "text": "Sofas"
                          },
                          {
                              "text": "Occasional Furniture"
                          }
                      ]
                  },
                  {
                      "text": "Decor",
                      "items": [{
                              "text": "Bed Linen"
                          },
                          {
                              "text": "Curtains & Blinds"
                          },
                          {
                              "text": "Carpets"
                          }
                      ]
                  }
              ]
          }],
          checkboxes: {
              checkChildren: true
          },
          check: onCheck
      });

      $("#treeview-right").kendoTreeView({});

      function onCheck(e) {
          e.preventDefault();
          var checkedNodeParentItem = this.dataItem(this.parent(e.node)).toJSON(),
              checkedNodeParentItemItems = checkedNodeParentItem.items;

          var treeviewTarget = $("#treeview-right").data("kendoTreeView"),
              treeviewTargetItems = treeviewTarget.dataItems().toJSON();

          var parentExists = false;
          for (var j = 0; j < treeviewTargetItems.length; j += 1) {
              var currentItem = treeviewTargetItems[j];

              if (currentItem.text == checkedNodeParentItem.text) {
                  parentExists = true;
                  break;
              }
          }

          if (parentExists) {
              var target = treeviewTarget.findByText(checkedNodeParentItem.text);
              var node = this.dataItem(e.node);

              treeviewTarget.append(node, target);

          } else {
              var clonedParent = $.extend({}, checkedNodeParentItem);
              clonedParent.items = [];
              var checkedItems = [];
              for (var i = 0; i < checkedNodeParentItemItems.length; i += 1) {
                  var isChecked = checkedNodeParentItemItems[i].checked;

                  if (isChecked) {
                      clonedParent.items.push(checkedNodeParentItemItems[i]);
                  }
              }
              treeviewTarget.append(clonedParent)
          }
      }

      </script>          
</body>
</html>

Answer 1

I suggest to use separate DataSource for second tree view, copy data to it and enable filtering. 我建议对第二个树视图使用单独的DataSource ，将数据复制到该树视图并启用过滤。

The complete working code is here http://dojo.telerik.com/oqIXa/2 完整的工作代码在这里http://dojo.telerik.com/oqIXa/2

The essential part is copying source data to destination with expanding all nodes and stripping source observable: 基本部分是通过扩展所有节点并将源数据剥离来将源数据复制到目标：

 function onCheck(e) {
      // toJSON is to strip Observable and decouple two datasources
      var sourceData = treeView.dataSource.data().toJSON();

      expandNodes(view);

      treeViewRight.setDataSource(new kendo.data.HierarchicalDataSource({
        data: sourceData,
        filter: {field: "checked", operator: "eq", value: true }
      }));
  }

There is a small problem however - if Decor node is not initially expanded and you select it, it behaves really strange. 但是，存在一个小问题-如果最初未扩展Decor节点并选择了它，则它的行为确实很奇怪。 Seems like data for collapsed items is not initially loaded and this causes some strange effects. 看起来像是折叠物品的数据最初并未加载，这会导致一些奇怪的影响。 This is something you should investigate further if you need initially collapsed tree items. 如果您需要最初折叠的树项目，则应该对此做进一步调查。

 text: "Decor",  items: ...

Kendo Treeview-如何在另一个Treeview中显示具有所有父节点的选定节点

问题描述

1 个解决方案

解决方案1
0 2017-06-09 20:45:51

Kendo Treeview-如何在另一个Treeview中显示具有所有父节点的选定节点

问题描述

1 个解决方案

解决方案1 0 2017-06-09 20:45:51

解决方案1
0 2017-06-09 20:45:51