jube-fork/Jube.App/wwwroot/kendo/examples/window/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" style="width: 340px">
            <h4>Configuration</h4>
            <div>
                <button id="show" data-role="button" class="k-button k-primary" data-bind="click: show, enabled: isEnabled">Open the dialog</button>
            </div>
        </div>
        <div class="box-col">
            <h4>Information</h4>
            Kendo UI Window supports
            <a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>
            binding. The demo also implements a
            <a href="https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom">custom binder</a>
            for its
            <a href="https://docs.telerik.com/kendo-ui/api/javascript/ui/window/configuration/visible">visible</a>
            configuration option.
        </div>
    </div>
        <div class="demo-section k-content">
            <div class="box-col" style="width: 340px">
                <span class="configHead">Move or resize the window</span>
                <div data-role="window"
                     data-title="About Alvar Aalto"
                     data-width="300"
                     data-height="150"
                     data-bind="dialogOpen: isVisible,
                            enabled: isEnabled,
                            events: { resize: onResize, dragstart: onDragStart, dragend: onDragEnd, close: onClose }">
                    <p>
                        Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use.
                        Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.
                    </p>
                </div>
            </div>
        </div>

        <script>
            // Implement custom binder for the 'visible' configuration option
            kendo.data.binders.widget.dialogOpen = kendo.data.Binder.extend({
                init: function (widget, bindings, options) {
                    kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
                },
                refresh: function () {
                    var that = this;
                    var value = that.bindings["dialogOpen"].get();
                    var dialog = $(that.element).data("kendoWindow");

                    if (value) {
                        dialog.open();
                    } else {
                        dialog.close();
                    }
                }
            });

            var viewModel = kendo.observable({
                isVisible: true,
                isEnabled: false,
                onResize: function (e) {
                    kendoConsole.log("event :: resize");
                },
                onDragEnd: function (e) {
                    kendoConsole.log("event :: dragend");
                },
                onDragStart: function (e) {
                    kendoConsole.log("event :: dragstart");
                },
                onClose: function (e) {
                    this.set("isVisible", false);
                    this.set("isEnabled", true);
                },
                show: function (e) {
                    this.set("isVisible", true);
                    this.set("isEnabled", false);
                },
            });

            kendo.bind($("#example"), viewModel);
        </script>
    </div>


    
</body>
</html>