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

<!DOCTYPE html>
<html>
<head>
    <title>MVVM</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">
    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Configuration</h4>
            <ul>
                <li><label><input type="checkbox" data-bind="checked: isVisible"> Visible</label></li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Information</h4>
            Kendo UI TreeView supports the
            <a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
            <a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
            <a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
        </div>
    </div>

    <div class="demo-section k-content">
        <div>
            <h4>Select a node</h4>
            <div class="files"
                 data-role="treeview"
                 data-drag-and-drop="true"
                 data-text-field="name"
                 data-spritecssclass-field="type"
                 data-bind="visible: isVisible,
                            source: files,
                            events: { select: onSelect }"></div>
        </div>

        <div style="padding-top: 2em;">
            <h4>Current view model state:</h4>
            <pre>
    {
        name: <span data-bind="text: name"></span>,
        files: <span data-bind="text: printFiles"></span>
    }
            </pre>
        </div>
    </div>

    <script>
        var viewModel = kendo.observable({
            isVisible: true,
            onSelect: function (e) {
                var treeView = e.sender;
                var text = treeView.text(e.node);
                kendoConsole.log("event :: select (" + text + ")");
            },
            files: kendo.observableHierarchy([
                {
                    name: "My Web Site", type: "folder", expanded: true, items: [
                        {
                            name: "images", type: "folder", expanded: true, items: [
                                { name: "logo.png", type: "image" },
                                { name: "my-photo.jpg", type: "image" }
                            ]
                        },
                        {
                            name: "resources", type: "folder", expanded: true, items: [
                                { name: "resources", type: "folder" },
                                { name: "zip", type: "folder" }
                            ]
                        },
                        { name: "about.html", type: "html" },
                        { name: "index.html", type: "html" }
                    ]
                }
            ]),
            printFiles: function () {
                // helper function that prints the relevant data from the hierarchical model
                var items = this.get("files").toJSON();

                function removeFields(item) {
                    delete item.index;

                    if (!item.items || !item.items.length) {
                        delete item.items;
                    } else {
                        item.items = $.map(item.items, removeFields);
                    }

                    return item;
                }

                $.map(items, removeFields);

                var jsonString = JSON.stringify(items, null, 2);

                return jsonString.replace(/\n/gi, "\n    ")
                    .replace(/\n\s*("name)/gi, " $1")
                    .replace(/\n\s*("type)/gi, " $1")
                    .replace(/\n\s*("expanded)/gi, " $1")
                    .replace(/\n\s*("selected)/gi, " $1")
                    .replace(/\n\s*("items)/gi, " $1")
                    .replace(/\s*\n\s*(})/gi, " $1")
                    .replace(/(\s*)]\n\s*}/gi, "] }");
            }
        });
        kendo.bind($("#example"), viewModel);
    </script>

    <style>

        .demo-section pre {
            font-size: 12px;
            width: 100%;
            white-space: pre-wrap;
        }

        .files h3 {
            color: #787878;
            border-bottom: 1px solid #ccc;
            padding-bottom: .4em;
            margin-bottom: .4em;
        }

        .files .k-treeview {
            height: 300px;
        }

        .files .k-sprite {
            background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder {
            background-position: 0 0;
        }

        .folder {
            background-position: 0 -16px;
        }

        .pdf {
            background-position: 0 -32px;
        }

        .html {
            background-position: 0 -48px;
        }

        .image {
            background-position: 0 -64px;
        }
    </style>
</div>


    
</body>
</html>