jube-fork/Jube.App/wwwroot/kendo/examples/dialog/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">
            <div>
               
            </div>
        </div>
        <div class="box-col">
            <h4>Information</h4>
            Kendo UI Dialog 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/dialog/configuration/visible">visible</a>
            configuration option.
        </div>
    </div>
    <span id="show" data-role="button" data-bind="click: show, enabled: isEnabled">Click here to open the dialog</span>
    <div data-role="dialog"
         data-title="Software Update"
         data-width="450"
         data-actions="[{text:'Skip this version', action: onSkip},{ text: 'Remind me later', action: onRemind },{ text: 'Install update', action: onInstall, primary: true }]"
         data-modal="false"
         data-content="<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>"
         data-bind="dialogOpen: isVisible,
                            events: { close: onClose}">
    </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("kendoDialog");

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

    var viewModel = kendo.observable({
        isVisible: true,
        isClosable: true,
        isEnabled: false,
        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);

    function onSkip(e) {
        kendoConsole.log("Action :: Skip this version");
    }

    function onRemind(e) {
        kendoConsole.log("Action :: Remind me later");
    }

    function onInstall(e) {
        kendoConsole.log("Action :: Install update");
    }

</script>


    
</body>
</html>