endo UI duplicated grid inside Kendo UI window with Knockout JS bindings

http://stackoverflow.com/questions/10837577/kendo-ui-duplicated-grid-inside-kendo-ui-window-with-knockout-js-bindings

by JasonMore

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="https://raw.github.com/rniemeyer/knockout-kendo/master/build/knockout-kendo.js"></script>
<script src="https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js"></script>
<div data-bind="foreach: regionRows">
        <div class="row-fluid" data-bind="foreach: regions">
            <div data-bind="css: spanClass">
                <div class="well" data-bind="sortable: { 
                    data: Widgets,  
                    allowDrop: true, 
                    options: { 
                        start: startDragging,
                        stop: stoppedDragging,
                        placeholder: 'ui-state-highlight' 
                    } 
                }">
                    <div class="product-page">
                        <p>
                            <span data-bind="text: Name"></span>
                            <span class="pull-right">
                                <select style="width: 50px" data-bind="options: Container.availableSizes, value: Container.SpanWidth"></select>
                                <button data-bind="click: editWidget"
                                    class="btn btn-mini btn-success">
                                    Edit</button>
                                <button data-bind="click: $parent.delete"
                                    class="btn btn-mini btn-danger">
                                    Delete</button>
                            </span>
                     ...

CSS

#grid {
 height: 300px;
}

JavaScript

var widgetViewModel = function (widgetViewModelData) {
        var self = this;

        // observables
        this.isWindowOpen = ko.observable(false);
        this.Options = ko.observableArray();

        // mapping
        ko.mapping.fromJS(widgetViewModelData, {
            "Container" : ko.mapping.toViewModel(containerViewModel)
        }, self);

        // buttons
        this.editWidget = function () {
            this.isWindowOpen(!self.isWindowOpen());
        };

        this.closeWindow = function () {
            self.isWindowOpen(false);
        };

        // functions
        this.clone = function () {
            return new widgetViewModel(widgetViewModelData);
        };

        this.dragged = function (item, event, ui) {
            debugger;

        }
    }

 var regionsViewModel = function (data) {
        var self = this;

        // mapping
        ko.mapping.fromJS(data, {
            "Widgets": ko.mapping.toViewModel(widgetViewModel)
        }, self);

        // computed 
        this.spanClass = ko.computed(function () {
            return 'droptarget span' + self.Size();
        });

        // buttons
        this.delete = function (widget) {
            self.Widgets.remove(widget);
        };

        // functions
        this.startDragging = function (event, ui) {
            ui.item.addClass('rotateCard');
        };

        this.stoppedDragging = function (event, ui) {
            ui.item.removeClass('rotateCard');
        };
    }