Kendo Treeview - How to Display selected node with all parent nodes in another treeview

Question

I have a kendo treeview with checkboxes and parents and child nodes. 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.

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>

sasha_gud sasha_gud · Accepted Answer · 2017-06-09T20:45:51

I suggest to use separate DataSource for second tree view, copy data to it and enable filtering.

The complete working code is here 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. 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 - How to Display selected node with all parent nodes in another treeview

1 Answers