jube-fork/Jube.App/wwwroot/kendo/examples/dialog/treeview-integration-angularjs.html

<!DOCTYPE html>
<html>
<head>
    <title>TreeView in Dialog (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/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 ng-controller="MyCtrl as controller">
        <div class="demo-section k-content">
            <p class="title">Employees</p>
            <div id="result">
                <span ng-repeat="obj in repeaterItems" class='selectedName'>
                    {{obj.FullName}}
                </span>
            </div>
            <button kendo-button class="k-primary" ng-click="dialog.open()">Pick Employees</button>
        </div>
        <div kendo-dialog="dialog" k-title="'Employees'" k-show="dialogShow"  k-width="400"
            k-visible="false" k-actions="actions" k-modal="false">
            <div class='k-textbox k-space-right search-wrapper'>
                <input id="employeesSearch" type='text' ng-model="searchValue" ng-keyup="searchKeyUp($event)"
                    placeholder='Search employees'/><span class='k-icon k-i-search'></span>
            </div>
            <div class='select-all-wrapper'>
                <input type='checkbox' class='k-checkbox' ng-change="selectAllItems()" ng-model="selectAll" id='selectAllInput'>
                <label class='k-checkbox-label' for='selectAllInput'>Select all employees</label>
                <span class='selected-count'>{{selectedEmployeesCount}} Employees selected</span>
            </div>
            <div kendo-tree-view="treeView" k-options="treeViewOptions">
                <span k-template data-color-matches="searchValue" data-value="{{dataItem.FullName}}"></span>
            </div>
        </div>
    </div>
</div>



<script>
    var directives = angular.module("KendoDemos", ["kendo.directives"])
        .controller("MyCtrl", function ($scope) {
            //Preselected items. Could be an empty array if there are no preselected values
            $scope.repeaterItems = [{ EmployeeId: 2, "FullName": "Andrew Fuller" }, { EmployeeId: 4, "FullName": "Margaret Peacock" }];

            $scope.selectAll = false;
            $scope.selectedEmployeesCount = 0;
            $scope.actions = [
                { text: 'Cancel' },
                {
                    text: 'OK', action: function () {
                        $scope.$apply(function () {
                            $scope.repeaterItems = getCheckedItems($scope.treeView);
                        });
                    }
                }
            ];

            $scope.searchValue = "An"; //Initial search pattern
            $scope.treeViewOptions = {
                dataSource: {
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/Employees",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "EmployeeId",
                            hasChildren: "HasEmployees"
                        }
                    }
                },
                dataTextField: "FullName",
                checkboxes: true,
                loadOnDemand: false,
                expandAll: true,
                dataBound: function (e) {
                    e.sender.expand(e.node);
                },
                check: function (e) {
                    setTimeout(function () {
                        $scope.$apply(function () {
                            $scope.selectedEmployeesCount = getCheckedItems(e.sender).length;
                        });
                    })
                }
            }

            $scope.dialogShow = function () {
                //Focusing the search box when the dialog is opened
                angular.element(document.getElementById("employeesSearch")).focus();
                //checking preselected values
                var dataSource = $scope.treeView.dataSource;
                $scope.treeView.element.find(".k-checkbox").removeAttr("checked").trigger("change");
                for (var i = 0; i < $scope.repeaterItems.length; i++) {
                    var item = $scope.treeView.findByText($scope.repeaterItems[i]["FullName"]);
                    item.find(".k-checkbox").first().click();
                }
            }

            $scope.searchKeyUp = function (keyEvent) {
                filter($scope.treeView.dataSource, keyEvent.target.value.toLowerCase());
            }

            $scope.selectAllItems = function () {
                $scope.treeView.element.find(".k-checkbox").prop("checked", $scope.selectAll);
                $scope.treeView.element.find(".k-checkbox").trigger("change");
            }

            function getCheckedItems(treeview) {
                var nodes = treeview.dataSource.data();
                return getCheckedNodes(nodes);
            }

            function getCheckedNodes(nodes) {
                var node, childCheckedNodes;
                var checkedNodes = [];

                for (var i = 0; i < nodes.length; i++) {
                    node = nodes[i];
                    if (node.checked) {
                        checkedNodes.push(node);
                    }

                    if (node.hasChildren) {
                        childCheckedNodes = getCheckedNodes(node.children.data());
                        if (childCheckedNodes.length > 0) {
                            checkedNodes = checkedNodes.concat(childCheckedNodes);
                        }
                    }
                }

                return checkedNodes;
            }

            function filter(dataSource, query) {
                var hasVisibleChildren = false;
                var data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data();

                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var text = item.FullName.toLowerCase();
                    var itemVisible =
                        query === true // parent already matches
                        || query === "" // query is empty
                        || text.indexOf(query) >= 0; // item text matches query

                    var anyVisibleChildren = filter(item.children, itemVisible || query); // pass true if parent matches

                    hasVisibleChildren = hasVisibleChildren || anyVisibleChildren || itemVisible;

                    item.hidden = !itemVisible && !anyVisibleChildren;
                }

                if (data) {
                    // re-apply filter on children
                    dataSource.filter({ field: "hidden", operator: "neq", value: true });
                }

                return hasVisibleChildren;
            }
        })

    directives.directive("colorMatches", [
      function () {
          return {
              restrict: "A",
              link: function (scope, element, attrs) {
                  scope.$watch(attrs.colorMatches, function (newValue, oldValue) {
                      var dataItemValue = element.data("value");
                      var index = dataItemValue.toLowerCase().indexOf(newValue.toLowerCase());
                      if (index >= 0) {
                          var index = dataItemValue.toLowerCase().indexOf(newValue.toLowerCase());
                          var length = newValue.length;
                          var original = dataItemValue.substr(index, length);
                          var newText = dataItemValue.replace(original, "<span class='query-match'>" + original + "</span>");
                          element.html(newText);
                      }
                      else {
                          element.html(dataItemValue);
                      }
                      return;
                  });
              }
          };
      }
    ]);
</script>
<style>
    #example {
        min-height: 200px;
    }

        #example .title {
            font-weight: bold;
            margin-bottom: 25px;
        }

    .search-wrapper {
        width: 100%;
    }
    .query-match {
        color: red;
    }
    .select-all-wrapper {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .selected-count {
        float: right;
        color: #aaa;
    }
    .k-treeview {
        border-width: 1px!important;
        padding: 5px;
    }
    .selectedName {
        padding: 5px 10px;
        background: #aaa;
        color: white;
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: 10px;
    }

    #result {
        padding-bottom: 15px;
    }

        #result:after {
            content: '';
            display: block;
            clear: both;
        }
</style>





    
</body>
</html>