jube-fork/Jube.App/wwwroot/kendo/examples/panelbar/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>
            <h4>PanelBar</h4>
            <ul kendo-panel-bar="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>
            </ul>
        </div>
        <div class="box-col" ng-show="selectedItem">
            <br />
            <h4>Selected: {{selectedItem.text}}</h4>
            <button class="k-button" ng-click="addItem(selectedItem)">Add item</button>
            <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
        </div>
    </div>
</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.addItem = function(item) {
            var newItem = makeItem();
            $scope.treeData.add(newItem);

        };

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

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

<style>
    .k-panelbar > .k-item > .k-link,
    .k-panel > .k-item > .k-link {
        padding-top: 5px;
        padding-bottom: 5px;
    }
</style>

    
</body>
</html>