14 July, 2014 Roel van Lisdonk 0 Comments 1 category

The native confirm dialog, shown when you use the confirm function in JavaScript can’t be positioned in JavaScript.

A Kendo UI window can be positioned.

 

 

image

 

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Kendo element binding research page.</title>
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.mobile.min.css" />
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <style>
        /* Resets */
        div, span, i, p, input, select {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
            color: rgba(112, 112, 112, 1);
            font-family: Arial, Helvetica, sans-serif; /* For know use default fonts used on google.com stackoverflow.com, telerik.com etc. */
            font-size: 13px;
            margin: 0; /* Margin zero is used to prevent unnecessary white space. */
            padding: 0; /* Padding zero is used to prevent unnecessary white space. */
        }        

        html, body {
            height: 100%;
            max-height: 100%;
        }

        body {
            padding: 20px;
        }

        .page {
            border: 1px solid rgb(212, 212, 212);
            height: 100%;
            max-height: 100%;
            padding: 10px;
            position: relative;
        }

        #confirm > p {
            padding-bottom: 20px;
        }

        .k-button {
            cursor: pointer;
        }

        .k-window-titlebar, .k-window-titlebar > span {
            cursor: move;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="page">
        <button class="k-button" data-bind="click: onShowClick">Show confirm</button>
        <div id="confirm"></div>
    </div>
    <script type="text/x-kendo-template" id="confirmTemplate">
        <p>#= ConfirmText #</p>
        <button class="k-button" id="yesButton">Yes</button>
        <button class="k-button" id="noButton"> No</button>
    </script>
    <!-- Libraries -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
    
    <!-- Custom -->
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

 

Code

var kendo = kendo || {};

kendo.controller = (function () {
    var self = {};
    var _vm = null;
    var _confirm = null;
    var _confirmTemplate = null;

    self.show = function () {
        _confirm =  $("#confirm").kendoWindow({
            title: "Delete record",
            visible: false, // The window will not appear before its .open method is called.
            width: "230px",
            height: "100px",
        }).data("kendoWindow");
        _confirmTemplate = kendo.template($("#confirmTemplate").html());
        _vm = new kendo.data.ObservableObject({
            onShowClick: function () {
                // Dynamically set some window options.
                _confirm.setOptions({
                    position: {
                        top: 200,
                        left: 200
                    }
                });
                _confirm.content(_confirmTemplate({ ConfirmText: "Delete record?"}));
                _confirm.open();

                $("#yesButton").click(function () {

                    // TODO: Delete record.
                    _confirm.close();
                })
                $("#noButton").click(function () {
                    // User cancelled the window.
                    _confirm.close();
                })
            }
        });

        kendo.bind($(".page"), _vm);
    };

    return self;
})();

kendo.controller.show();
Tags:
Category: Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts