stackoverflow demo: extending kendoWindow

by lhoeppner

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<div id="window">
    <p>this is a kendoMyWindow with black text</p>
    <p>the window will throw an exception when closing.</p>
    <p>see the browser console for details.</p>
</div>
<div id="mywindow">
    <p>this is a kendoMyWindow with green text</p>
    <p>the window works as expected.</p>
</div>

JavaScript

(function ($) {
    var ui = kendo.ui,
        Window = ui.Window,
        KWINDOWCONTENT = ".k-window-content";

    var MyWindow = Window.extend({
        init: function (element, options) {
            var that = this;

            Window.fn.init.call(that, element, options);
            that._customize();
        },
        destroy: function () {
            var that = this;

            that._destroyCustomize();
            Window.fn.destroy.call(that);
        },

        options: {
            name: 'MyWindow'
        },

        _customize: function () {
            this.originalValue = $(this.element).css('color');
            $(this.element).css('color', 'green');
        },

        _destroyCustomize: function () {
            $(this.element).css('color', this.originalValue);
        }
    });

    ui.plugin(MyWindow);

    /**
    * update kendoWindow's _object method to return our new widget as well
    */
    ui.Window.fn._object = function (element) {
        var content = element.children(KWINDOWCONTENT);

        return content.data("kendoWindow") || content.data("kendoMyWindow") || content.data("kendo" + this.options.name);
    };
})(jQuery);

$('#window').kendoWindow();
$('#mywindow').kendoMyWindow();