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

<!DOCTYPE html>
<html>
<head>
    <title>API</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 class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Expand / Collapse</h4>
        <ul class="options">
            <li>
                <button id="expandAllNodes">Expand all nodes</button>
            </li>
            <li>
                <button id="collapseAllNodes">Collapse all nodes</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Enable / Disable</h4>
        <ul class="options">
            <li>
                <button id="disableNode">Disable node</button>
            </li>
            <li>
                <button id="enableAllNodes">Enable all nodes</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Add / Remove</h4>
        <ul class="options">
            <li>
                <input id="appendNodeText" value="Node" />
                <button id="appendNodeToSelected">Append node</button>
            </li>
            <li>
                <button id="removeNode">Remove node</button>
            </li>

        </ul>
    </div>

    <div class="box-col">
        <h4>DataSource interaction</h4>
        <ul class="options">
            <li>
                <button id="sortDataSource">Sort</button>
            </li>
            <li>
                <input id="filterText" value="Item 1" />
                <button id="filterDataSource">Filter by text</button>
            </li>
        </ul>
    </div>
</div>
<div id="example">
    <div class="demo-section k-content">
        <div id="treeview"></div>
    </div>

    <script>
        $(document).ready(function() {
            var treeview = $("#treeview").kendoTreeView({
                    dataSource: {
                        data: [
                            { text: "Item 1", expanded: true, items: [
                                { text: "Item 1.1" },
                                { text: "Item 1.2" },
                                { text: "Item 1.3" }
                            ] },
                            { text: "Item 2", items: [
                                { text: "Item 2.1" },
                                { text: "Item 2.2" },
                                { text: "Item 2.3" }
                            ] },
                            { text: "Item 3" }
                        ]
                    },
                    loadOnDemand: false
                }).data("kendoTreeView"),

                handleTextBox = function(callback) {
                    return function(e) {
                        if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                            callback(e);
                        }
                    };
                };


            $("#disableNode").click(function() {
                var selectedNode = treeview.select();

                treeview.enable(selectedNode, false);
            });

            $("#enableAllNodes").click(function() {
                var selectedNode = treeview.select();

                treeview.enable(".k-item");
            });

            $("#removeNode").click(function() {
                var selectedNode = treeview.select();

                treeview.remove(selectedNode);
            });

            $("#expandAllNodes").click(function() {
                treeview.expand(".k-item");
            });

            $("#collapseAllNodes").click(function() {
                treeview.collapse(".k-item");
            });

            var append = handleTextBox(function(e) {
                    var selectedNode = treeview.select();

                    // passing a falsy value as the second append() parameter
                    // will append the new node to the root group
                    if (selectedNode.length == 0) {
                        selectedNode = null;
                    }

                    treeview.append({
                        text: $("#appendNodeText").val()
                    }, selectedNode);
                });

            $("#appendNodeToSelected").click(append);
            $("#appendNodeText").keypress(append);

            // datasource actions

            var ascending = false;

            $("#sortDataSource")
                .text(ascending ? "Sort ascending" : "Sort descending")
                .click(function() {
                    treeview.dataSource.sort({
                        field: "text",
                        dir: ascending ? "asc" : "desc"
                    });

                    ascending = !ascending;

                    $(this).text(ascending ? "Sort ascending" : "Sort descending")
                });

            var filter = handleTextBox(function(e) {
                var filterText = $("#filterText").val();

                if (filterText !== "") {
                    treeview.dataSource.filter({
                        field: "text",
                        operator: "contains",
                        value: filterText
                    });
                } else {
                    treeview.dataSource.filter({});
                }
            });

            $("#filterDataSource").click(filter);
            $("#filterText").keypress(filter);
        });
    </script>
</div>


    
</body>
</html>