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 chanaka1

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>
<div>
    <a id="btnClientLookup" href="#" class="k-button k-button-icontext k-grid-search"><span
            class="k-icon k-search"></span>Client Lookup</a>

    <span data-bind="text: Header"></span>
    <div id="clientLookupWindow" data-bind="kendoWindow: { async: true, isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
        <div id="gridClients" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
        </div>
    </div>
    <div id="gridClientsOutside" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
    </div>
</div>

CSS

#grid {
 height: 300px;
}

JavaScript

$(document).ready(function () {
        var clients = { FilteredClients: [{ ClientName: '1', ClientCode: 'Value 1' }, { ClientName: '2', ClientCode: 'Value 2'}], Header: 'TEST' };
        var viewModel = ko.mapping.fromJS(clients);
        ko.applyBindings(viewModel);

        var showClientLookupWindow = function () {

            var window = $("#clientLookupWindow").data("kendoWindow");
            window.center();
            window.open();
        }

        $('#btnClientLookup').bind('click', showClientLookupWindow);
    });