Question

I’m working with Kendo UI and Knockout JS libraries and have a strange problem.
I’m trying to display kendo grid within kendo window, but the rows inside the grid get duplicated.
Here’s a piece of code:

JS:

$(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);
    });

HTML:

<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: { 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>

Running it in the browser, we see that there are 2 rows in gridClientsOutside, but after clicking btnClientLookup, the window pops up with the gridClients, which consists of 4 rows.
Did anyone encounter this issue or have a workaround for this?

Thanks in advance,
Ihor

Answer 1

At a quick glance, it looks like the bindings inside the kendoWindow section are getting bound twice, which is causing the issue.

There bindings can run in an async mode and that is probably how kendoWindow should be set in the knockout-kendo library.

For the moment, you can do this:

<div id="clientLookupWindow" data-bind="kendoWindow: { async: true, isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">

This adds async: true in the kendoWindow binding options. Otherwise, you could do ko.bindingHandlers.kendoWindow.options.async = true; to set it globally, before calling applyBindings.

Here is a sample: http://jsfiddle.net/rniemeyer/2MexC/