jube-fork/Jube.App/wwwroot/kendo/examples/diagram/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="demo-section k-content">
        <div>
            <h4>Hover some series</h4>
            <div id="diagram" data-role="diagram"
                 data-layout='{"type": "tree", "subtype": "down", "horizontalSeparation": 30, "verticalSeparation": 30}'
                 data-shape-defaults='{"width": 40, "height": 40}'
                 data-bind="visible: isVisible,
                            source: dataSource,
                            events: {select: onSelect}"
                 style="height: 250px;" ></div>
        </div>        
    </div>
    <div class="box wide">
        <div class="box-col">
            <h4>Configuration</h4>
            <div>
                <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
            </div>
        </div>
        <div class="box-col">
            <h4>Information</h4>
            Kendo UI Diagram 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>
<script>
    function diagramNodes() {
        var root = { name: "item" + 0, items: [] };
        addNodes(root, 1);
        return [root];
    }

    function addNodes(root, level) {
        if (level < 3) {
            for (var i = 0; i <= level; i++) {
                var node = { name: "item" + level + "." + (i + 1), items: [] };
                root.items.push(node);

                addNodes(node, level + 1);
            }
        }
    }

    var diagram = kendo.dataviz.diagram;
    var Shape = diagram.Shape;
    var Connection = diagram.Connection;
    var Point = diagram.Point;

    function elementText(element) {
        var text;
        if (element instanceof Shape) {
            text = element.dataItem.name;
        } else if (element instanceof Point) {
            text = "(" + element.x + "," + element.y + ")";
        } else if (element instanceof Connection) {
            var source = element.source();
            var target = element.target();
            var sourceElement = source.shape || source;
            var targetElement = target.shape || target;
            text = elementText(sourceElement) + " - " + elementText(targetElement);
        }
        return text;
    }

    function createDigaram() {
        var viewModel = kendo.observable({
            isVisible: true,
            onSelect: function (e) {
                var action;
                var items;
                if (e.selected.length) {
                    action = "Selected";
                    items = e.selected;
                } else if (e.deselected.length) {
                    action = "Deselected";
                    items = e.deselected;
                }
                var selected = $.map(items, function (item) {
                    return elementText(item);
                });
                kendoConsole.log(action + ": " + selected.length + " item(s), [" + selected.join(", ") + "]");
            },
            dataSource: new kendo.data.HierarchicalDataSource({
                data: diagramNodes()
            })
        });
        kendo.bind($("#example"), viewModel);
    }

    $(document).ready(createDigaram).bind("kendo:skinChange", createDigaram);

</script>
</div>

    
</body>
</html>