jube-fork/Jube.App/wwwroot/kendo/examples/treeview/angular.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/angular.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <div class="box-col">
            <h4>TreeView</h4>
            <div kendo-tree-view="tree"
             k-data-source="treeData"
             k-on-change="selectedItem = dataItem">
                <span k-template>
                     {{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
                 </span>
             </div>
        </div>
        <div class="box-col" ng-show="selectedItem">
          <h4>Selected: {{selectedItem.text}}</h4>
          <button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
          <button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
          <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
        </div>
    </div>
    <style>
        .k-treeview .k-in {
            padding: 5px;
        }
    </style>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
            { text: "Item 1" },
            { text: "Item 2", items: [
              { text: "SubItem 2.1" },
              { text: "SubItem 2.2" }
            ] },
            { text: "Item 3" }
          ]});

          $scope.click = function(dataItem) {
            alert(dataItem.text);
          };

          function makeItem() {
            var txt = kendo.toString(new Date(), "HH:mm:ss");
            return { text: txt };
          };

          $scope.addAfter = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            var newItem = makeItem();
            array.splice(index + 1, 0, newItem);
          };

          $scope.addBelow = function() {
            // can't get this to work by just modifying the data source
            // therefore we're using tree.append instead.
            var newItem = makeItem();
            $scope.tree.append(newItem, $scope.tree.select());
          };

          $scope.remove = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            array.splice(index, 1);

            $scope.selectedItem = undefined;
          };
    })
</script>


    
</body>
</html>