Kendo UI Window does not respond to data-bind visible settings

Question

I'm trying to toggle the visible property of a Kendo UI window through the data-bind method using an MVVM pattern but it is not responding as it should according to the Kendo documentation.

<div id="KendoWindow"
    data-role="window"  
    data-bind="visible:WindowVisible"
    data-title="Title does not show"
    data-width="500"
    data-height="300"
>
    <div class="span4"  > 
            <label for="Comment">Comments</label>   
            <textarea id ="Comment"  data-bind="value: Comment"></textarea>
    </div>

I am initializing it properly but if I set the WinowVisible property to false in the viewModel like so,

this.set("WindowVisible", false);

the window stays visible.

If I set it through jQuery like so :

 var dialog = $("#KendoWindow").data("kendoWindow");
        dialog.setOptions({
           visible:false
        });

it will then become invisible. Then I can't make it visible again if I run this code:

var dialog = $("#KendoWindow").data("kendoWindow");
        dialog.setOptions({
           visible:true
        });

Answer 1

Maybe try adding data-visible="false" to the window, then when the ShowWindow becomes true, it should become visible. I have a checkbox bound to the boolean value, as well as a button click function setting the boolean and both seem to work fine.

See sample...

http://jsbin.com/jecih/1/edit